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 相关文章推荐
js 为label标签和div标签赋值的方法
Aug 08 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
详解React 条件渲染
Jul 08 Javascript
详解TypeScript中的类型保护
Apr 29 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
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
护理专业推荐信
2013/11/07 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
小学生家长评语集锦
2014/01/30 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
期终自我鉴定
2014/02/17 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
酒店节能降耗方案
2014/05/08 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
volatile保证可见性及重排序方法
2022/08/05 Java/Android