JavaScript addEventListener 第三个参数
先看一个完整的演示页面代码。
Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>JavaScript addEventListener</title>
<style>
.header-container ul {
padding: 40px;
background-color: #eee;
}
.header-container li {
padding: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<header class="header-container" id="header">
<nav>
<ul>
<li><a href="#">nav ul li a</a></li>
</ul>
</nav>
</header>
<script>
const header = document.getElementById('header'),
ul = header.querySelector('ul'),
li = header.querySelector('li'),
useCapture = true;
ul.addEventListener('click', function() {
console.log(useCapture, 'ul');
}, useCapture);
li.addEventListener('click', function() {
console.log(useCapture, 'li');
}, useCapture);
</script>
</body>
</html>
结果
1. useCapture: false（默认值也是false）
输出：
true "ul"
true "li"
2. useCapture: true
输出：
true "li"
true "ul"
语法
MDN（Mozilla Developer Network）
useCapture 可选
Boolean，是指在DOM树中，注册了该listener的元素，是否会先于它下方的任何事件目标，接收到该事件。沿着DOM树向上冒泡的事件不会触发被指定为use capture（也就是设为true）的listener。当一个元素嵌套了另一个元素，两个元素都对同一个事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 事件流 及 JavaScript Event order 文档。 如果没有指定， useCapture 默认为 false 。
Othree
useCapture 這個參數就是在控制這時候兩個 click 事件的先後順序。如果是 false ，那就會使用 bubbling，他是從內而外的流程，如果是 true，那就是 capture，和 bubbling 相反是由外而內。capture 和 bubbling，兩個檔案只有差在此一參數不同，可以發現事件的發生順序不一樣了。
总(bai)结(hua)
useCapture参数默认为false，事件执行顺序为 事件冒泡bubbling（由内向外），即本示例中顺序是li → ul；useCapture值为true，事件执行顺序为事件捕捉capturing（由外向内），即本示例中顺序是ul → li。
事件捕捉与冒泡：http://javascript.info/bubbling-and-capturing
来源/参考
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
https://blog.othree.net/log/2007/02/06/third-argument-of-addeventlistener/
转载请注明出处：http://blog.givebest.cn/javascript/2017/08/01/javascript-addEventListener-third-parameter.html
JavaScript addEventListener 第三个参数的更多相关文章
- addEventListener 的三个参数
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- addEventListener 第三个参数
addEventListener api target.addEventListener(type, listener[, options]); target.addEventListener(typ ...
- addEventListener－第三个参数 useCapture
转载自:http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.aspaddEventListener-开始 addEventListener-事件流 addE ...
- javascript:addEventListener
addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEve ...
- addListener添加事件监听器，第三个参数useCapture (Boolean) 的作用
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- [转]addEventListener的第三个参数
如果要把HTML元素的事件与某个函数绑定起来,可以有下面三种方法,以最常见的“点击”事件为例. 方法一: 直接在对应的HTML元素标签上绑定函数 ? 1 <button id='submit' ...
- addEventListener的第三个参数详解
示例代码 element.addEventListener("mousedown", func, { passive: true }); element.addEventList ...
- JS003. 事件监听和监听滚动条的三种参数（ addEventListener( ) ）
全局 1 window.addEventListener('scroll', () => { 2 console.log('------') 3 console.log(document.doc ...
随机推荐
- udl文件测试数据库连接
直接建一个udl后缀的文件(新建txt文件,改后缀) 然后会默认有个小电脑标志,双击打开就可以看到,可以用来配置数据库连接信息,可以测试连接,如果连接通过,可以再用记事本打开这个udl文件,里面就有生 ...
- java中volatile不能保证线程安全
今天打了打代码研究了一下java的volatile关键字到底能不能保证线程安全,经过实践,volatile是不能保证线程安全的,它只是保证了数据的可见性,不会再缓存,每个线程都是从主存中读到的数据,而 ...
- org.apache.commons.lang3 的随机数生成
apache org.apache.commons.lang3 的随机数生成工具,方便使用. String a12 = RandomStringUtils.random(4, "012345 ...
- Java 基础 程序流程控制 （下）
Java 程序流程控制 (下) 此篇单独对循环结构的知识点进行整理: 之前讲到循环结构分为:for循环,while循环,do...while循环三种最基本的循环结构:在JDK1.5以后的版本还提供了f ...
- Java 基础 程序流程控制 （上）
Java程序流程控制 (上) Java程序大体分为三种流程控制结构:顺序结构.分支结构.循环结构 顺序结构 程序由上到下的逐行执行,中间没有任何跳转和判断语句. 示例代码如下: public clas ...
- Vue.js 介绍入门
Vue.js 的目标 是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. ...
- Lambda（Linq）
在谈到lambda表达式之前,首先要说一下委托,在下一章会详细介绍委托,在这里就是简单说明一下. 委托的关键字段delegate,声明委托 public delegate void NoReturnN ...
- [leetcode-575-Distribute Candies]
Given an integer array with even length, where different numbers in this array represent different k ...
- 3.ubuntu如何安装搜狗输入法
1.http://blog.csdn.net/qq_21792169/article/details/53152700 2.http://jingyan.baidu.com/article/54b6b ...
- 利用MUI滑动进行利息计算（移动端APP显示）
在开发移动端的应用时,会用到很多的手势操作,比如滑动.长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,其中滑动应用是比较常见的应用操作,本篇文章将讲述如何利用滑动改变对应值进行计算 ...