关于在同一元素上使用相同参数多次调用addEventListner()的结果

最新推荐文章于 2023-03-22 11:46:38 发布

原创最新推荐文章于 2023-03-22 11:46:38 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了JavaScript权威指南中关于同一元素上多次调用addEventListener的描述。测试发现，当第二个参数为函数直接量时，事件处理程序会注册多次，而函数引用则仅注册一次。在IE8及以下版本，attachEvent会多次注册，但在IE9及以上版本，其行为与addEventListener一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS权威指南17.2.3节中说: 使用相同的参数在同一个对象上多次调用addEventListner是没用的,处理程序仍然只会注册一次. 为了验证这句话的可信度,我做了小测试,结果表明当第二个参数使用函数直接量时,此理论不成立, 当使用函数引用时,此理论成立, 代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>addEventListener()</title>
	<style>
		body {margin: 100px;}
	</style>
</head>
<body>
<h3>验证:"使用相同的参数在同一个对象上多次调用addEventListner是没用的,处理程序仍然只会注册一次"是否属实</h3>
<img src="http://img01.taobaocdn.com/tps/i1/T1Kz0pXzJdXXXIdnjb-146-58.png" id="tlogo"/>
<script type="text/javascript">
	var img = document.getElementById('tlogo');
	var i = 0, k=0;
	//以下代码会注册三次
	img.addEventListener("click",function() {console.log("k的值为"+(k++));},false);
	img.addEventListener("click",function() {console.log("k的值为"+(k++));},false);
	img.addEventListener("click",function() {console.log("k的值为"+(k++));},false);
	//以下三行代码只会注册一次
	img.addEventListener("click",c,false);
	img.addEventListener("click",c,false);
	img.addEventListener("click",c,false);
	function c() {console.log("i的值为"+(i++));}
</script>
</body>
</html>

当点击页面中的图片时,每次都会打印3次k和一次i.

另外顺便提下，在IE8及以下版本中不支持addEventListener()，事件要通过attachEvent()来注册，此方法在IE8及以下版本中，用相同参数多次调用时，第二个参数无论是函数引用还是函数直接量，都会注册多次。而在IE9及以上版本中，则表现得和addEventListener一样。