事件绑定在多人共同制作的网页中非常的常见,因为下面为一个简单的例子,如果在同一个页面内同时有两个WINDOW.ONLOAD函数,如下,猜一下会执行2个?还是报错都不执行?还是只执行一个?答案是只会弹出字符b.为了解决问题,便需要用到事件的绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function (){
var oasd=document.getElementById("asd");
oasd.onclick=function (){
alert('a');
}
}
window.onload=function (){
var oasd=document.getElementById("asd");
oasd.onclick=function (){
alert('b');
}
}
</script>
</head>
<body>
<input type="button" name="asd" id="asd" value="点击" />
</body>
</html>
按照上面的例子,想要两个都执行的话,要用到事件绑定,在IE用的是attachEvent,其他主流浏览器则是用addEventListener
先上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="asd" id="asd" value="点击" />
</body>
<script type="text/javascript">
var oasd=document.getElementById("asd");
function tie_event(obj,eve,fn){
if(obj.attachEvent){
//兼容IE,运行顺序为从后到前
obj.attachEvent('on'+eve,fn);
}
else{
//兼容非IE,运行顺序为从前到后
obj.addEventListener(eve,fn,false);
}
}
tie_event(oasd,'click',function(){
alert('a')});
tie_event(oasd,'click',function(){
alert('b')});
</script>
</html>
因为兼容 非IE的addEventListener 中的事件名称不包含on,所以需要在封装的时候做点调整,只需在使用attachEvent的时候给参数拼接上字符‘on’即可。另对于addEventListener的第三个参数,可以为TRUE或FALSE,区别是TRUE为捕获,FALSE为冒泡,虽然都可以正常触发目标事件,但是对其他事件可能有影响,应注意区分使用。