javascript事件绑定addEventListener,attachEvent

为了考虑浏览器的兼容性问题，都需要对浏览器进行类型检测。

function addHandler(el, type, fn){
        if(window.attachEvent){
             //ie事件名称前增加on开头
             el.attachEvent("on" + type, fn);
        }else{
             //记得加上第三个参数，由于ie下没有事件捕捉，所以ff设置为事件冒泡保持一致
             el.addEventListener(type, fn, false);
        }
}

大多数前端开发中都会找到这样代码，但是从效率上来说还需要进一步考虑，这样在每次绑定时候都需要判断一次，其实在第一次调用的时候就已经知道浏览器的类型。

function addHandler(el, type, fn){
        if(window.attachEvent){
             //ie事件名称前增加on开头
            addHandler ＝ function(el, type, fn){
                 el.attachEvent("on" + type, fn);
            } 
        }else{
             //记得加上第三个参数，由于ie下没有事件捕捉，所以ff设置为事件冒泡保持一致
             addHandler = function(type, fn, false){
                 el.addEventListener(type, fn, false);
            }
        }
       addHandler(type, fn, false); //第一次调用
}

在第一次调用以后的绑定方法就不需要每次都判断类型了，这样减少了重复的类型判断。

参考：
http://parkmy.iteye.com/blog/431306
http://blog.csdn.net/fisher_jiang/article/details/2139089

评论

2 楼 deng131 2013-09-17  

谢谢你的提醒，是有个地方写错了

1 楼 redhacker 2013-09-13  

写错了吧，那个通用的函数！我改了下，请参考

function addEvent(el, type, fn) {  
    if(window.attachEvent) {  
    	addEvent=function(el, type, fn){  
             el.attachEvent("on" + type, fn);  
        };
    }else{  
    	addEvent=function(el, type, fn){  
            el.addEventListener(type, fn, false);  
        }
    }
    addEvent(el, type, fn);
}

var button = document.getElementById("test");
addEvent(button, 'click', function(){
	alert(1);
});

addEvent(button, 'click', function(){
	alert(2);
})