事件处理方式on、addEventListener和attachEvent

on

1. 绑定事件处理程序

ele.onxxx = function(){}

如下添加一个点击事件，使用onclick，程序中this指向事件对象本身

不能给同一个对象绑定相同的处理事件，后面的会把前面的覆盖掉

2. 解除事件处理程序

ele.onxxx = false/''/null;

解除绑定就是给onclick属性重新赋值为false或者空串或者null

addEventListener

1. 绑定事件处理程序

ele.addEventListener(type,fn,false);

其中的test也可以是匿名函数，但匿名函数不能解除绑定
程序中this指向事件对象本身
IE9及以上兼容

可以给一个对象绑定多个处理程序

2. 解除事件处理程序

ele.removeEventListener(type,fn,false);

解除处理程序要用相同的处理对象，处理事件，处理函数

attachEvent

1. 绑定事件处理程序

ele.attachEvent('on' + type,fn);

IE8及以下兼容
处理程序中this指向window
其中的test也可以是匿名函数，但匿名函数不能解除绑定

可以给一个对象绑定多个处理程序

2. 解除事件处理程序

ele.detachEvent('on' + type,fn);

解除处理程序要用相同的处理对象，处理事件，处理函数

封装兼容的事件处理方法

attachEvent方法中handle的this本来应该是window，这里改成了与其他方法一致的事件对象本身

function addEvent(element,type,handle){
    if(element.addEventListener){
        element.addEventListener(type,handle,false);
    }else if(element.attachEvent){
        element.attachEvent('on'+type,function(){
            handle.call(element);
        })
    }else{
        element['on'+type] = handle;
    }
}