事件委托/键盘事件

1.fn()与fn的区别?

  fn():执行里面的函数

  fn:  将函数的内容赋给谁

  2.事件委托的解析

  onmouseenter,onmouseleave与onmouseover,onmouseout的区别?

  onmouseenter获取的事件源(target)是元素的本身,所以他没有事件冒泡的机制

  onmouseover获取的事件源(target)是为他的子级,当改变事件源的时候也是改变子级(同时也让自己拥有了父级的事件)从而就会产生冒泡机制;

  3.dom0级与dom2级的区别?

  1.dom2级正常事件,先捕获在冒泡

    dom0级无捕获,直接就冒泡

  (addEventListener() 中的第三个参数  true代表捕获   false代表冒泡)

  2. dom0级事件元素绑定多个onclick,最后值执行最后一个onclick

    dom2级事件绑定多个click,都要执行(注意:当绑定多个事件名,函数,事件发生阶段(捕获或冒泡),三者完全一样时,才执行一个);

  案例:

  div.addEventListener("click","fn1",false)

  div.addEventListener("click","fn1",false)    (这种情况下才执行一个,且事件函数不能使用匿名函数)(因为匿名函数开辟的内存地址不一样,事件函数名相同时,内存地址才一样)

  3.dom0级如果绑定多个相同事件,后者会覆盖前者,dom2级不会

    dom0级只适合普通事件,dom2级需要制定的事件类型如domContentLoaded(当文档结构加载完成之后执行)

  4.事件取消

  dom0级直接赋值:null

  div.onclick=null

  dom2级需要使用removeEventListener()

  div.removeEventListener("click","fn1",true)

  5.键盘事件:

  键盘事件:onkeydown(键盘按下)  onkeyup(键盘抬起)

  document.onkeydown (包括了所有键盘,键盘事件的常用写法)

  键盘事件触发时,浏览器天生自带一个叫keyboardEvent对象,所有键盘信息都在这个对象上

  靠keycode来识别你按哪个键

  我们发现ev有个属性keycode键盘编码

  案例:

  document.onkeydown=function(ev){

    var ev=ev||window.event

    console.log(ev.keycode)

  }

  右击鼠标事件:oncontextmenu

  案例:鼠标右击事件:

  

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .you{
        position:absolute;
        width:200px;
        height:300px;
        border:red 1px solid;
      }
    </style>
  </head>
  <body>
  </body>
  <script>
    document.oncontextmenu=function(ev){
    var ev=ev||window.event;
    ev.preventDefault()||ev.returnValue;
    var div=document.createElement("div");
    div.className="you";
    div.id="you";
    var you=document.getElementById("you");
      if(you){

        document.body.removeChild(you);
        div.style.left=ev.clientX+5+"px";
        div.style.top=ev.clientY+5+"px";
        document.body.appendChild(div)
      }
      else{
        div.style.left=ev.clientX+5+"px";
        div.style.top=ev.clientY+5+"px";
        document.body.appendChild(div)
      }


    }
    document.onclick=function(){
    var you=document.getElementById("you");
    document.body.removeChild(you)
  }
  </script>

  鼠标拖拽的案例:

  

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  <style>
    div{
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    }
  </style>
  </head>
  <body>
    <div id="ha">

    </div>
  </body>
  </html>
  <script>
  var ha=document.getElementById("ha");
  ha.onmousedown=function(ev){
    var ev=ev||window.event;
    var x=ev.clientX-ha.offsetLeft;
    var y=ev.clientY-ha.offsetTop;
    document.onmousemove=function(ev){
      var ev=ev||window.event;
      ha.style.left=ev.clientX-x+"px";
      ha.style.top=ev.clientY-y+"px";
    }
  ha.onmouseup=function(){
    document.onmousemove=null;
    }
  }
  </script>

猜你喜欢

转载自www.cnblogs.com/liancai001/p/10139911.html