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 ...
随机推荐
- php中常用的处理字符串的函数
1.将字符串转换为数组的函数:str_split() array str_split ( string $string [, int $split_length = 1 ] ) string:输入字符 ...
- Github站点英文翻译
1.Github首页 Pull requests Issues Gist 请求 问题 要点 ----------------------------------------------------- ...
- Fuzz安全狗注入绕过
安全狗版本为: apache 4.0 网站为: php+mysql 系统: win 2003 这里只要是fuzz /*!union 跟 select*/ 之间的内容: /*!union<FUZZ ...
- 原始js调用 选中事件
curRadio.get(0).checked=true;//原始js调用 选中事件,curRadio是radio单个对象
- 关于ZendStudio 10.5的破解 包括mac
一. 下载ZendStudio 10.5 首先下载ZendStudio 10.5 我使用的是mac版 下载地址是: http://downloads.zend.com/studio-eclipse/1 ...
- 理解oauth2.0【转载】
原文出处: http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth是一个关于授权(authorization)的开放网络标准,在全世界得 ...
- C++ 派生类到基类转换的可访问性
今天看c++ primer关于派生类到基类转换的可访问性,看的很晕,看了下面的文章恍然大悟: http://www.2cto.com/kf/201403/283389.html C++ primer第 ...
- Unity3D-Shader-实现X光效果
[旧博客转移 - 2016年1月3日 16:40 ] 最近学习了一些Shader效果,打算把学到的知识总结一下,这篇讲一下这种轮廓发光的效果(如下图所示),也有一些地方管这个叫X光 1.原理 ...
- vue--指令中值得随笔的地方
v-model-- 双向数据绑定 number修饰指令 <!DOCTYPE html> <html lang="en"> <head> < ...
- 30分钟学会使用Spring Web Services基础开发
时隔一年终于又推出了一篇30分钟系列,上一篇<30分钟学会反向Ajax>是2016年7月的事情了.时光荏苒,岁月穿梭.虽然一直还在从事Java方面的开发工作,但是私下其实更喜欢使用C++. ...