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 字符编码规则
May 04 Javascript
js读取注册表的键值示例
Sep 25 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
BootStrap中的表单大全
Sep 07 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
深入理解vue Render函数
Jul 19 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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解密Unicode及Escape加密字符串
2015/05/17 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
动态样式类封装JS代码
2009/09/02 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python中cPickle用法例子分享
2014/01/03 Python
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
介绍Python中几个常用的类方法
2015/04/08 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python如何快速实现分布式任务
2017/07/06 Python
python使用tornado实现登录和登出
2018/07/28 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
解除劳动合同协议书范本
2014/04/14 职场文书
大学生村官考核材料
2014/05/23 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers