JavaScript 事件绑定 封装一个兼容性事件绑定方法

一、事件绑定方法

1、element.on*** = function(event){} this 指向自身
    兼容性好，基本等于写在HTML的行间上，所以叫做句柄的绑定方式

2、obj.addEventListener(type,fn,false) IE9以下不兼容  也就是w3c标准    this 指向自身
    type:事件类型
    fn:处理函数
    false

可以给一个对象的一个事件绑定多个处理函数，例如：
html代码:

js代码：

var div = document.getElementsByTagName("div");
div.addEventListener('click',function(){
    console.log("a");
},false)
div.addEventListener('click',function(){
    console.log("b");
},false)

会打印 a 和 b，执行两个函数，这两个函数的样子一样，但是地址不一样

但是：
    

    var div = document.getElementByTagName("div");
    div.addEventListener('click',test,false);
    div.addEventListener('click',test,false);
    function test(){
        console.log("a");
    }
        只会打印一个a，不能给一个函数绑定多次。

3、obj.attachEvent('on' + type,fn) IE独有  与obj.addEventListener(type,fn,false)差不多 this 指向window
    区别：可以给一个对象的一个事件绑定多个处理函数，而且同一个绑定函数多次依旧能执行多次
    this 指向window 解释：
        var div = document.getElementByTagName("div");
        div.attachEvent('onclick',function () {
            console.log(this);//--->window
        })
    解决 this 指向自身
        var div = document.getElementByTagName("div");
        div.attachEvent('onclick',function () {
            test.call (div) ;
        })
        function () {
            console.log(this);//---->div
        }

4、封装一个兼容性的 addEvent(element,type,handle);方法

给一个dom对象添加该事件类型的处理函数

js代码：

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