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>
原文地址：https://www.cnblogs.com/sherryweb/p/10984005.html