详解addEventListener的三个参数之useCapture


Posted in Javascript onMarch 16, 2015

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 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
关于redux-saga中take使用方法详解
Feb 27 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 #Javascript
jquery中radio checked问题
Mar 16 #Javascript
jquery中JSON的解析方式
Mar 16 #Javascript
浅谈js中的闭包
Mar 16 #Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 #Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 #Javascript
JavaScript中的DSL元编程介绍
Mar 15 #Javascript
You might like
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
优秀班主任申报材料
2014/12/16 职场文书
会计岗位职责范本
2015/04/02 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
python元组打包和解包过程详解
2021/08/02 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL