您的位置：首页 > Web前端 > JavaScript

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

2013-08-19 16:53 204 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js

相关文章推荐

新的分享

章节导航