addEventListener()第三个参数useCapture (Boolean)详细解析


Posted in Javascript onNovember 07, 2013

举例

<div id="div1">
  <div id="div2">
    <div id="div3">
      <div id="div4">
      </div>
    </div>
  </div>
</div>

如果在 d3 上点击鼠标,事件流是这样的:

捕获阶段 在 div1 处检测是否有 useCapture 为 true 的事件处理程序,若有,则执行该程序,然后再同样地处理 div2。

目标阶段 在 div3 处,发现 div3 就是鼠标点击的节点,所以这里为目标阶段,若有事件处理程序,则执行该程序,这里不论 useCapture 为 true 还是 false。

冒泡阶段 在 div2 处检测是否有 useCapture 为 false 的事件处理程序,若有,则执行该程序,然后再同样地处理 div1。

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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
JavaScript原型链详解
Nov 07 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 #Javascript
jQuery把表单元素变为json对象
Nov 06 #Javascript
JQuery插件开发示例代码
Nov 06 #Javascript
javascript实现yield的方法
Nov 06 #Javascript
Javascript事件实例详解
Nov 06 #Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 #Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 #Javascript
You might like
php中iconv函数使用方法
2008/05/24 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
Javascript实现的分页函数
2006/12/22 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python入门篇之面向对象
2014/10/20 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python实现解数独程序代码
2017/04/12 Python
简述Python2与Python3的不同点
2018/01/21 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
班长自荐书范文
2014/02/11 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
社区护士演讲稿
2014/08/27 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python