事件的绑定与解除

绑定方式

句柄绑定

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;
    }
}