事件绑定在多人共同制作的网页中非常的常见，因为下面为一个简单的例子，如果在同一个页面内同时有两个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为冒泡，虽然都可以正常触发目标事件，但是对其他事件可能有影响，应注意区分使用。
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
