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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
JavaScript前端面试组合函数
Jun 21 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
写一个用户在线显示的程序
2006/10/09 PHP
在JavaScript中调用php程序
2009/03/09 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php常用图片处理类
2016/03/16 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python实现八大排序算法
2016/08/13 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python模块的制作方法实例分析
2019/12/21 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
python中count函数简单的实例讲解
2020/02/06 Python
python的setattr函数实例用法
2020/12/16 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
自荐书模板
2013/12/19 职场文书
2015年度村委会工作总结
2015/04/29 职场文书