1. 程式人生 > >事件委託/鍵盤事件

事件委託/鍵盤事件

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>