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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue 单页应用和多页应用的优劣
Oct 22 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文件读写操作之文件写入代码
2011/01/13 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
Vue仿支付宝支付功能
2018/05/25 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
JS实现分页导航效果
2020/02/19 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
简单了解Python write writelines区别
2020/02/27 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis