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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 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 如何向 MySQL 发送数据
2006/10/09 PHP
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
requireJS使用指南
2016/04/27 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
总经理职责范文
2013/11/08 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
八年级数学教学反思
2014/01/31 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
实习公司领导推荐函
2014/05/21 职场文书
模具专业自荐信
2014/05/29 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
手残删除python之后的补救方法
2021/06/26 Python
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers