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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
JavaScript 字符串连接性能优化
Dec 20 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
javascript对象的相关操作小结
May 16 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
js实现简单五子棋游戏
May 28 Javascript
vue实现虚拟列表功能的代码
Jul 28 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定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
软件设计的目标是什么
2016/12/04 面试题
十周年庆典策划方案
2014/06/03 职场文书
承诺函范文
2015/01/21 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
2015年暑假工作总结
2015/07/13 职场文书
致运动员的广播稿
2015/08/19 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL