详解addEventListener的三个参数之useCapture

更新时间：2015年03月16日 10:34:43 投稿：hebedich

本文主要给大家介绍的是addEventListener的三个参数之中的useCapture参数的使用及示例分享，有需要的小伙伴参考下

addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture，本文就讲解它。

 
<div id="outDiv">

  <div id="middleDiv">

    <div id="inDiv">请在此点击鼠标。</div>

  </div>

</div>

<div id="info"></div>

复制代码代码如下:

var outDiv = document.getElementById("outDiv");

var middleDiv = document.getElementById("middleDiv");

var inDiv = document.getElementById("inDiv");

var info = document.getElementById("info");

outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);

middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);

inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

上述是我们测试的代码，根据 info 的显示来确定触发的顺序，有三个 addEventListener，而 useCapture 可选值为 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。

•全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；
•全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；
•outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；
•middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；
•……

最终得出如下结论：

•true 的触发顺序总是在 false 之前；
•如果多个均为 true，则外层的触发先于内层；
•如果多个均为 false，则内层的触发先于外层。

以上就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

简单了解JavaScript中常见的反模式
这篇文章主要介绍了简单了解JavaScript中常见的反模式，反模式是指对反复出现的设计问题的常见的无力而低效的设计模式，俗话说就是重蹈覆辙。这篇文章描述了 JavaScript 中常见的一些反模式，以及避免它们的办法。,需要的朋友可以参考下
2019-06-06
利用原生JS实现懒加载lazyLoad的三种方法总结
加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,这篇文章主要给大家介绍了关于利用原生JS实现懒加载lazyLoad的三种方法,需要的朋友可以参考下
2021-07-07
$JSON数据中存在单个转义字符“\”的处理方法$
JSON数据中存在单个转义字符“\”的处理方法
这篇文章主要介绍了JSON数据中存在单个转义字符“\”的处理方法,在这里反斜杠（又称右斜杠"\"），还表示转义字符，字符串中不能成单出现。具体内容详情大家跟随脚本之家小编一起看看吧
2018-07-07
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
在页面开发时我们少不了各种鼠标交互动作，那么JavaScript中如何实现鼠标坐标获取和窗口内模块拖动，本文就详细的介绍一下，感兴趣的可以了解一下
2021-05-05
一文教你如何像导入JS模块一样导入CSS
HTML中通过使用css可以让网页的美观效果更进一步,下面这篇文章主要给大家介绍了如何像导入JS模块一样导入CSS的相关资料,文中给出了详细的实例代码,需要的朋友可以参考下
2021-09-09
js无后端实现点击加载查看更多（提示SEO友好度）
为了提示SEO友好度,并且避免调用后端接口给服务器造成负担,可以使用js无后端实现点击加载查看更多,比如HTML中源码存在60条记录,预先显示20条记录,点击“查看更多”一次追加10条,最后一次后按钮文本改为“已查看全部”,在JavaScript中,你可以使用以下步骤来实现
2024-10-10
基于JavaScript打造一款桌面级便签系统
本文将用html，css和JavaScript实现一个简单的便签系统。除非手动清空便签，否则便签会一直保留，非常方便。感兴趣的小伙伴可以跟随小编一起动手试一试
2022-02-02
JavaScript实现二级菜单的制作
这篇文章主要为大家详细介绍了JavaScript实现二级菜单的制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
JS关于刷新页面的相关总结
在本篇内容中我们给大家整理了关于JS刷新页面的所有相关知识点以及整理了相关的技术文章，大家可以收藏本页面继续深入学习。
2018-05-05
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
这篇文章主要介绍了详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09

详解addEventListener的三个参数之useCapture

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具