一、事件绑定
使用对象.事件=函数的形式绑定响应函数
这样绑定事件的缺陷:
只能为一个元素的一个事件绑定一个响应函数,绑定多个,最后一个会覆盖之前的
例子解释
//为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>