JS事件绑定——解决addEventListener()与attachEvent()兼容性问题

一、事件绑定

使用对象.事件=函数的形式绑定响应函数

这样绑定事件的缺陷：
只能为一个元素的一个事件绑定一个响应函数，绑定多个，最后一个会覆盖之前的

例子解释

//为btn01绑定一个单击事件
btn01.onclick=function(){
	alert(1)
}

//为btn01绑定一个单击事件
btn01.onclick=function(){
 	alert(2)
}

单击btn01时,只显示alert(2),将alert(1)覆盖掉

二、解决办法

2.1addEventListener()与attachEvent()方法

addEventListener()举例：

btn01.addEventListener("click",function(){
	alert(1);
},false);

btn01.addEventListener("click",function(){
	alert(2);
},false);

先执行alert(1),再执行alert(2)

attachEvent()举例

btn01.attachEvent("onclick"，function(){
	alert(1);
})

btn01.attachEvent("onclick"，function(){
	alert(2);
})

先执行alert(2),再执行alert(1)

2.2自写函数解决两种方法兼容性问题

函数bind参数

• obj:要绑定的事件对象
• eventStr:事件的字符串(不要on)
• callback：回调函数

<script type="text/javascript">
	
	window.onload = function(){
		var btn01 = document.getElementById("btn01");
		
		bind(btn01,"click",function(){
		alert(1);
		})
		bind(btn01,"click",function(){
		alert(2);
		})
	}
	
	/*
	 * 参数
	 *    obj:要绑定的事件对象
	 * 	  eventStr:事件的字符串(不要on)
	 * 	  callback：回调函数
	 */
	function bind(obj,eventStr,callback){
		
		if(obj.addEventListener){
			//大部分浏览器兼容的方式
			obj.addEventListener(eventStr,callback,false);
		}else{
			//IE8及以下
			obj.attachEvent("on"+eventStr,function(){
				//在匿名函数中调用匿名函数
				callback.call(obj);
			});
		}
	}
</script>