对同一个对象绑定多个响应事件并都执行
Posted sherryweb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对同一个对象绑定多个响应事件并都执行相关的知识，希望对你有一定的参考价值。
1.因为 onclick=" " 添加的元素响应事件，先添加的事件，会被后来添加的事件层叠掉，只能执行最后一个响应的事件
所以要用到事件监听addElementLitener()来绑定多个处理函数，而因为兼容性的问题需要兼容代码。
2.在IE8中，addElementLitener()这个函数不被兼容，而使用attachEvent()。但是，这个又不被谷歌，火狐兼容，所以需要写兼容代码
3.addElementLitener() 有三个参数，而attachEvent()只有两个参数，前一项的响应事件名前面不用加on，IE需要这是他自己因为违背标准指定的，其他版本是为了兼容IE而做出的让步
4.在浏览器不支持某个方法时，他会返回的是字符串undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定多个事件</title>
</head>
<body>
<input type="button" value="点我不花钱" id="btn">
<script type="text/javascript">
function myGet(id)
return document.getElementById(id);
function addEventListener(element,type,fn)
// 这个自定义的函数跟下面的方法重名注意区分
if(typeof element.addEventListener != "undefined")
// 一定要注意，undefined是字符串类型，如果去掉在IE中死循环
element.addEventListener(type,fn,false);
else if(typeof element.attachEvent != "undefined")
element.attachEvent("on"+type,fn);
// 响应事件名字如click应该直接写也能直接表达他的意思，而微软非要在前面加一个"on"
else
element["on"+type] = fn;
// 如果浏览器上面两个都不兼容，只能写这样一种
addEventListener(myGet("btn"),"click",function ()
console.log("陈小帅");
);
addEventListener(myGet("btn"),"click",function ()
console.log("是真的");
);
addEventListener(myGet("btn"),"click",function ()
console.log("真的好帅啊");
);
</script>
</body>
</html>
以上是关于对同一个对象绑定多个响应事件并都执行的主要内容，如果未能解决你的问题，请参考以下文章