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

左手的ㄟ右手 2024-04-18 22:01 3阅读 0赞

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一样。