对同一个对象绑定多个响应事件并都执行,和此例子的兼容代码

要点:

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>

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/83720698