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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
vue实现简单跑马灯效果
May 25 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 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注入实例
2006/10/09 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python控制台显示时钟的示例
2014/02/24 Python
python生成日历实例解析
2014/08/21 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
django 控制页面跳转的例子
2019/08/06 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
pytorch实现查看当前学习率
2020/06/24 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
迎新晚会邀请函
2014/02/01 职场文书
超市开学活动方案
2014/03/01 职场文书
英文求职信范文
2014/05/23 职场文书
三方协议书
2015/01/27 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书