繫結方式

控制代碼繫結

div.onclick = function() {
   console.log('onclick');
}

這種方式相容性很好，但是一個元素的一種事件只能繫結一個函式，基本等同於寫在行間的事件

<div onclik="console.log('onclick');"></div>

ele.addEventListener(type, handle, false)方法繫結

div.addEventListener('click',function() {
   console.log('click');
}, false);
 

這裡面有三個引數，第一個引數是事件型別，第二個引數是處理函式，第三個引數是是否捕獲。
處理函式可以之間在addEventListener方法裡面寫一個匿名函式，也可以在外面寫一個命名函式，然後在方法裡面寫函式的引用。

這種方法一種事件可以繫結多個函式，但是同一處理函式只能繫結一次。

div.addEventListener('click', test, false);
div.addEventListener('click', test1, false);
function test(){
    console.log('click');
}
function test1(){
    console.log('click1'
 
);
}

點選一次同時列印 click 和 click1。
這是唯一一個有事件捕獲的方法，但是IE9以下不相容

ele.attachEvent(‘on’ + type, handle)方法繫結

這是IE獨有的方法，一個事件可以繫結多個處理函式

div.attachEvent('onclick', function() {
    console.log('click');
})

基本上和addEventListener差不多，但是當同一個函式繫結多次時，addEventListener只執行一次，而attachEvent會繫結幾次執行幾次。

div.attachEvent('onclick'
 
, test);
div.attachEvent('onclick', test);

function test(){
    console.log('click');
}

點選一次會列印兩次click。

事件處理程式的執行環境

控制代碼繫結方式和addEventListener方式中，函式裡面的this指向的是元素本身。
attachEevent中，函式裡面的this指向的是window而不是元素本身，針對這種情況，我們需要把函式提取出來，然後在attachEvent中用call來改變函式內部的this指向。

div.attachEvent('onclick', function() {
  test.call(div);
});
function test(){
  console.log(this);
}

封裝事件繫結函式

function attachEvent(ele, type, handle) {
    if (ele.addEventListener) {
        ele.addEventListener(type, handle, null);
    }else if (ele.attachEvent) {
        ele['temp' + type + handle] = handle;
        ele[type + handle] = function () {
            ele['temp' + type + handle].call(ele);
        };
        ele.attachEvent('on' + type, ele[type + handle]);
    }else {
        ele['on' + type] = handle;
    }
}

解除事件處理程式

控制代碼方式

div.onclick = null;

ele.removeEventListener(type, handle, false)

只用命名函式才可以解除繫結，當繫結的是匿名函式的時候，是沒有辦法解除繫結的。

div.addEventListener('click', function () {console.log('click')}, false);
div.removeEventListener('click', function () {console.log('click')}, false);

這是沒有辦法解除繫結的，因為這是兩個匿名函式

div.addEventListener('click', test, false);
div.removeEventListener('click', test, false);

function test() {
    console.log('click');
}

這種方式可以解除繫結

ele.detachEvent(‘on’ + type, handle)

針對IE的attachEvent的解除繫結，同removeEventListener一樣，只有命名函式可以解除繫結，匿名函式無法解除繫結

封裝解除繫結函式

function removeEvent(ele, type, handle) {
    if(ele.removeEventListener) {
        ele.removeEventListener(type, handle, false);
    }else if (ele.datachEvent) {
        ele.detachEvent('on' + type, handle);
    }else {
        ele['on' + type] = null;
    }
}