javascript——事件绑定第二种形式

 事件绑定第一种形式：obj.onclick = fn1;

给文档添加多个点击事件，后面会覆盖前面的事件，所以只有最后一个事件执行了。

window.onload = function(){
    
    function fn1(){alert('1');}
    function fn2(){alert('2');}
    function fn3(){alert('3');} 

    document.onclick = fn1;
    document.onclick = fn2;
    document.onclick = fn3;    //最后一个会覆盖前面的事件
};

 

事件绑定第二种形式：【IE：obj.attachEvent(事件名称，事件函数); 标准：obj.addEventListener(事件名称，事件函数，是否捕获); 】

IE：obj.attachEvent(事件名称，事件函数);
1.没有捕获
2.事件名称有on
3.事件函数执行的顺序：标准IE -> 正序 非标准 IE -> 倒序
4.this指向window

标准：obj.addEventListener(事件名称，事件函数，是否捕获);
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this触发该事件的对象

IE：obj.attachEvent(事件名称，事件函数);

window.onload = function(){
    
    function fn1(){alert('1');}
    function fn2(){alert('2');}
    function fn3(){alert('3');} 

/*document.attachEvent('onclick', function() {
    fn1.call(document);
});
document.attachEvent('onclick', fn2);*/

};

标准：obj.addEventListener(事件名称，事件函数，是否捕获);

window.onload = function(){
    
    function fn1(){alert('1');}
    function fn2(){alert('2');}
    function fn3(){alert('3');} 

/*
    是否捕获 : 默认是false    false:冒泡 true：捕获
    object.addEventListener(type , fn ,false);
*/

    document.addEventListener('click' , fn1 , false);
    document.addEventListener('click' , fn2 , false);
    document.addEventListener('click' , fn3 , false);
};

上面都方法都只兼容个别浏览器，以下是集合两种做的兼容进行封装处理：

window.onload = function(){
    
    function fn1(){alert('1');}
    function fn2(){alert('2');}
    function fn3(){alert('3');} 

//函数封装
function bind(obj , evname ,fn){
    if(obj.addEventListener){
        obj.addEventListener(evname,fn,false)
    }else{
        obj.attachEvent('on' + evname ,function(){
            fn.call(obj);
        });
    }
}
　　//函数调用
    bind(document , 'click' ,fn1);
    bind(document , 'click' ,fn2);
    bind(document , 'click' ,fn3);

};