addEventListener等事件监听的参数细谈

最新推荐文章于 2025-07-20 10:02:48 发布

转载最新推荐文章于 2025-07-20 10:02:48 发布 · 10w+ 阅读

----------JavaScript---------- 专栏收录该内容

58 篇文章

订阅专栏

本文详细解析了DOM事件流中捕获与冒泡的概念，并通过实例演示了如何使用addEventListener方法来控制事件触发的顺序。重点介绍了第三个参数的作用及其对事件触发的影响。

原文链接：http://zhangyaochun.iteye.com/blog/1270659

写的目的主要是细化到具体的参数，兼容性的文章可以参考其他我博客的文章。

1.addEventListener(type,listener.useCapture)

type 字符串，事件名称，如'click'等 不需要'on'前缀
listener 事件处理的函数，实现EventListener接口
useCapture 是否使用捕获--- true为捕获，false为冒泡

a. 先从第3个参数开始吧。

/*  
html文档树结构  
*/  
<div id="out">  
   <div id="innerP">  
         <div id="innerChild">最里面的孩子</div>  
   </div>  
</div>  
  
<div id="showInfo"></div>

var out = document.getElementById('out');  
var innerP = document.getElementById('innerP');  
var innerChild = document.getElementById('innerChild');  
var infoShow = document.getElementById('infoShow');  
/* 
绑事件 
*/  
out.addEventListener('click',function(){infoShow.innerHTML += 'outDiv' + '<br />'},false);  
  
innerP.addEventListener('click',function(){infoShow.innerHTML += 'innerP' + '<br />'},false);  
  
innerChild.addEventListener('click',function(){infoShow.innerHTML += 'innerChild' + '<br />'},false);

测试原理设计：

因为我们测试的是第3个参数,它有true和false两个值，所以有六种排列

测试结果：