JavaScript事件綁定

瀏覽器事件概述

　　技術通常水平有限，有什麼錯的地方，望你們指正。

　　當咱們在瀏覽網頁的時候，瀏覽器能夠在視覺上爲咱們展現出頁面還能夠在行爲上響應用戶的操做，瀏覽器響應用戶的操做就是經過事件來完成的，瀏覽器提供了事件註冊接口和事件監聽接口這樣瀏覽器就能夠接收用戶的行爲而且進行處理了。瀏覽器已經提供不少的事件包括頁面加載、鼠標事件以及鍵盤事件等，咱們只須要定義好事件處理函數便可，當用戶的操做觸發這些事件時就會執行咱們預先定義好的處理函數。一個行爲的完整過程以下：

　　瀏覽器在交互的過程當中基本的功能就是經過事件+AJAX來完成的，瀏覽器經過事件來響應用戶的行爲，若是是有關數據的操做在經過AJAX來與服務器完成交互。

事件的基本使用

　　首先事件有三種不一樣的綁定方式，分別爲在DOM元素中直接綁定、在JavaScript中綁定，綁定事件監聽函數。

　　在DOM元素中直接綁定形式以下：

<button id="demo" onclick="test('test')">button</div>

　　在通常狀況下這能夠說是最很差的一種綁定方法了，首先表現層和行爲層耦合在一塊兒，對於後期的維護帶來了極大的不便，其次必須使用全局函數，咱們都知道要儘量的減小全局變量的聲明，並且這種綁定方式是能夠被覆蓋的，若是咱們在JS中在爲該元素綁定一個點擊處理函數，那麼在DOM元素中綁定的事件處理函數都不會執行。

function test(){
  console.log("DOM");
}
window.onload = function(){
  var demo = document.getElementById("demo");
  demo.onclick = function(){
      console.log("JS");
  }
}
//只打印JS

　　在JavaScript中綁定形式以下：

window.onload = function(){
  var demo = document.getElementById("demo");
  demo.onclick = function(){
      console.log("JS");
  }
}

　　這種綁定方式的缺點在於只能註冊一個監聽函數，後面的監聽函數會覆蓋前面的監聽函數假如咱們有以下的代碼：

window.onload = function(){
  var demo = document.getElementById("demo");
  demo.onclick = function(){
      console.log("JS");
  }
  demo.onclick = function(){
      console.log("change");
  }
}
//打印change

　　綁定事件監聽函數形式以下：

window.onload = function(){
  var demo = document.getElementById("demo");
  demo.addEventListener("click",function(){console.log("handler1")},false);
  demo.addEventListener("click",function(){console.log("handler2")},false);
}
//打印handler1 handler2

　　這種綁定方法能夠知足咱們的要求,表現層行爲層分離，一個事件能夠綁定多個處理函數，除了兼容方面的問題好像就沒什麼問題了，兼容問題後面再介紹首先看一下addEventListener的用法。

　　addEventListener接收三個參數，第一個參數表示事件名稱，第二個參數表示事件處理函數，第三個參數表示事件是捕獲或冒泡。

　　第一個參數表示事件名稱在使用時就是"click"、"mousemove"不要帶有on,第二個參數表示事件的處理函數，通常稱爲回調函數，能夠是一個匿名函數表達式或者函數名稱，第三個參數是一個布爾值爲true時表示事件捕獲爲false表示事件冒泡，通常第三個參數咱們都設置爲false,由於在IE瀏覽器下只支持事件冒泡。

addEventListener兼容問題處理

　　在非IE瀏覽器中addEventListener是能夠正常使用的在IE9及以上的版本中也是可使用的，IE提供了一個相同功能的API就是attachEvent來保證在IE8及如下能夠正常使用。attachEvent接收兩個參數第一個參數表示事件名稱須要加上on好比"onclick"、"onmousemove"，第二個參數表示事件處理函數能夠是一個匿名函數表達式或者函數名稱，基本使用方式以下：

window.onload = function(){
  var demo = document.getElementById("demo");
  demo.attachEvent("onclick",function(){console.log("handler1")});
  demo.attachEvent("onclick",function(){console.log("handler2")});
}

　　因此在綁定事件時要同時考慮這兩種狀況，咱們能夠自行封裝一個事件綁定函數（ele:DOM對象，e:事件名稱，callback:事件處理函數）：

window.onload = function(){
    var demo = document.getElementById("demo");
    addEvent(demo,"click",function(){console.log("兼容測試")});
    function addEvent(ele,e,callback){
        ele.addEventListener?ele.addEventListener(e,callback,false):ele.attachEvent("on"+e,callback);
    }
}

　　也可擴展Element的原型函數：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEventListener("click",function(){console.log("handler test")},false);
}
Element.prototype.addEventListener = Element.prototype.addEventListener || function(e,cb){
    this.attachEvent("on"+e,cb)
}

取消事件綁定

　　若是咱們綁定事件函數以後想取消事件函數的綁定，實現起來也很簡單，若是咱們使用的是JavaScript的事件綁定方式，直接給事件處理函數設置爲null便可：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.onclick = function(){
        console.log("11111")
    }
    demo.onclick = null;
}

　　若是咱們使用事件監聽函數綁定的事件能夠調用取消綁定的API每一種綁定方式都有它對應的解綁方式：

　　addEventListener綁定的監聽函數用removeEventListener來解除綁定，該函數接一樣收三個參數第一個參數表示事件名稱，第二個參數表示事件函數的名稱，第三個參數是一個布爾值表示冒泡階段或者捕獲階段。若是綁定事件函數時第二個參數是一個匿名函數表達式的話是不能解除綁定的，只有第二參數是一個以聲明的函數的名稱纔可使用removeEventListener來解除綁定。下面的這段代碼的事件處理函數是不能解除綁定的：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEventListener("click",function(){console.log("aaaa")},false);
}

　　要想移除事件處理函數必須使用函數聲明：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEventListener("click",handler,false);
    demo.removeEventListener("click",handler);
    function handler(){
        console.log("aaaa");
    }
}

　　attachEvent綁定的監聽函數要使用detachEvent來解除綁定使用方式和addEventListener基本一致，不一樣點就是IE瀏覽器只支持事件冒泡因此省略了第三個參數，事件名稱要加上on使用方式爲：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.attachEvent("onclick",handler);
    demo.detachEvent("onclick",handler);
    function handler(){
        console.log("aaaa");
    }
}

訪問事件對象

　　在事件處理函數中，存在一個對象記錄着事件的各類信息，這個對象只存在於事件函數執行的過程當中，咱們能夠在事件處理函數中使用一個參數來代理事件對象，在非IE瀏覽器中咱們能夠直接使用參數做爲事件對象，在IE瀏覽器中咱們須要使用window.event來獲取事件對象，使用方式以下：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.onclick = function(e){//事件處理函數是由瀏覽器來調用的，在調用時會把事件對象做爲參數傳遞給事件處理函數
        var e = e || window.event;
        console.log(e);
    }
}

　　咱們在事件處理函數中若是須要阻止默認事件和中止冒泡就須要用到事件對象。

　　在非IE瀏覽器中：

e.preventDefault();//阻止默認行爲
e.stopPropagation();//中止冒泡

　　在IE瀏覽器中：

e.returnValue = false;//阻止默認行爲
e.cancelBubble = true;//中止冒泡