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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
深入研究React中setState源码
Nov 17 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
js实现无缝轮播图效果
Mar 09 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Windows下python3.6.4安装教程
2018/07/31 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
全陪导游欢迎词
2014/01/17 职场文书
政府信息公开实施方案
2014/05/09 职场文书
房屋租房协议书范本
2014/12/04 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
通知格式
2015/04/27 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python