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

最新推荐文章于 2022-09-27 08:35:23 发布

何迟

最新推荐文章于 2022-09-27 08:35:23 发布

阅读量1.1k

点赞数

分类专栏： Javascript 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/83720698

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Javascript

27 篇文章 0 订阅

订阅专栏

要点：

1.因为 οnclick=" " 添加的元素响应事件，先添加的事件，会被后来添加的事件层叠掉，只能执行最后一个响应的事件

所以要用到事件监听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>

效果：

何迟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对同一个对象绑定多个响应事件并都执行，和此例子的兼容代码

要点：1.因为 onclick=" " 添加的元素响应事件，先添加的事件，会被后来添加的事件层叠掉，只能执行最后一个响应的事件所以要用到事件监听addElementLitener()来绑定多个处理函数，而因为兼容性的问题需要兼容代码。2.在IE8中，addElementLitener()这个函数不被兼容，而使用attachEvent()。但是，这个又不被谷歌，火狐兼容，所以需要写兼容...
复制链接

扫一扫