详解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 相关文章推荐
js的表单操作 简单计算器
Dec 29 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jQuery事件详解
Feb 23 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
实例讲解JavaScript 计时事件
Jul 04 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+Ajax实现表单验证的详解
2013/06/25 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
json数据的列循环示例
2013/09/06 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python多线程扫描端口代码示例
2018/02/09 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Django REST framwork的权限验证实例
2020/04/02 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
微信搭讪开场白
2015/05/28 职场文书
创业计划书之寿司
2019/07/19 职场文书
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技