JS-事件处理程序

JS事件处理程序

DOM 0级事件处理程序

DOM 0级操作中，绑定的事件函数内的this指向的是调用该事件的DOM元素。
优点：支持所有现代浏览器（跨浏览器）
缺点：不能在同一个DOM元素绑定多个事件

给DOM元素绑定DOM 0级事件
用法：DOM元素.on+事件名 = 匿名函数/函数名
例： element.onclick = function() {} 

解绑DOM 0级事件 
解绑方法很简单：只要将element.onclick = null; 即可解绑 

DOM 2级事件处理程序

DOM 2级事件，有两个方法，分别时绑定（addEventListener）和解绑(removeEventListener)方法，这两个方法接收三个参数，分别是事件的名称，事件处理方法，在捕获阶段执行或在冒泡阶段执行。这种绑定
优点：可在同一元素绑定多个事件
缺点：不兼容IE8之前的IE浏览器。

//DOM 2级事件绑定
语法：element.addEventListener('事件名','处理函数',false);
注：使用DOM 2级事件绑定程序时，事件名前不需要加'on';
    /*
        @type: 绑定事件的类型，如click,mouseover
        @handler: 绑定事件的方法；
        @isBubble: false;
    */
    element.addEventListener('click',function(){},false);   

//DOM 2级事件解绑
语法: element.removeEventListener('事件名','函数名',false)；
注：解绑时，解绑元素的传入removeEventListener方法的参数列表需与绑定时传入的参数列表一致。
除此以外，有一点很容易忽略的是，当我们绑定时，传入的是一个匿名函数，而当我们解绑时，即使列表参数一致，
匿名函数也一样，但还是解绑失败。原因就是，绑定时的匿名函数跟解绑时的匿名函数并不是同一个函数，即使它们的
代码内容完全相同。

例： 绑定如上例子，我们现在解绑上述例子。
element.removeEventListener('click',function(){},false);  //解绑失败

现在我们来试一下传入函数名的方式来绑定和解绑事件。
// 事件处理函数
function handler() { console.log(this); }
// 绑定
element.addEventListener('mouseover',handler,false);
// 解绑
element.removeEventListener('mouseover',handler,false);  //解绑成功。

IE事件处理程序

IE事件处理程序与DOM 2级大体相似，但由于时IE自己的事件处理程序，且兼容IE8以下的低版本IE。通常我们将它用来做兼容处理。IE事件处理程序也有两个方法，绑定(attachEvent)和解绑(detachEvent)。但与DOM 0级和DOM 2级事件处理程序不同的不同之处是，IE事件处理程序的绑定事件函数作用域是全局的，意味着绑定函数的this指向的是window而不是绑定的DOM元素。

// IE事件处理程序作用域
element.attachEvent('onclick',function(){
    console.log(this === window);  // true
}

// 绑定
element.attachEvent(on+事件名,事件处理函数);
例：
    element.attachEvent('onclick',function() {
        console.log(213);
    });

// 解绑
解绑的注意事项与DOM 2级一样，若绑定时传入的是匿名函数，则无法解绑。
例： element.detachEvent('onclick',handler);  

跨浏览器的事件处理程序

在下面代码中，使用单例模式封装了一个兼容性较好的事件绑定程序和事件解绑程序。

    var eventUtil = {
    /*
        @ele: 需要绑定事件的DOM元素
        @type: 绑定的事件名(不带前缀on)
        @handler: 绑定到DOM元素的事件处理函数
        @功能： 给指定的DOM元素绑定事件
    */
    addHandler: function(ele, type, handler) {
        if( ele.addEventListener ){
            ele.addEventListener(type,handler,false);
        }else if( ele.attachEvent ){
            ele.attachEvent('on'+type,handler);
        }else{
            ele['on'+type] = handler;
        }
    },
     /*
        @ele: 需要解绑事件的DOM元素
        @type: 解绑的事件名(不带前缀on)
        @handler: 绑定到DOM元素的事件处理函数
        @功能： 给指定的DOM元素解绑事件
      */
    removeHandler: function(ele, type, handler) {
        if( ele.removeEventListener ) {
            ele.removeEventListener(type,handler,false);
        }else if( ele.detachEvent ) {
            ele.detachEvent('on'+type,handler);
        }else{
            ele['on'+type] = null;
        }
    }
}