先看一个完整的演示页面代码。

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 → uluseCapture 值为 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 第三个参数的更多相关文章

  1. addEventListener 的三个参数

    addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...

  2. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  3. addEventListener 第三个参数

    addEventListener api target.addEventListener(type, listener[, options]); target.addEventListener(typ ...

  4. addEventListener-第三个参数 useCapture

    转载自:http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.aspaddEventListener-开始 addEventListener-事件流 addE ...

  5. javascript:addEventListener

    addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEve ...

  6. addListener添加事件监听器,第三个参数useCapture (Boolean) 的作用

    addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...

  7. [转]addEventListener的第三个参数

    如果要把HTML元素的事件与某个函数绑定起来,可以有下面三种方法,以最常见的“点击”事件为例. 方法一: 直接在对应的HTML元素标签上绑定函数 ? 1 <button id='submit'  ...

  8. addEventListener的第三个参数详解

    示例代码 element.addEventListener("mousedown", func, { passive: true });  element.addEventList ...

  9. JS003. 事件监听和监听滚动条的三种参数( addEventListener( ) )

    全局 1 window.addEventListener('scroll', () => { 2 console.log('------') 3 console.log(document.doc ...

随机推荐

  1. 无法启动此程序因为计算机中丢失msvcr71

    http://jingyan.baidu.com/article/25648fc1abc4d69190fd0077.html       下面是msvcr文件下载地址: 链接:http://pan.b ...

  2. win server2012 r2 服务器共享文件夹设置

    按照普通的win7 设置共享文件夹,不起作用 于是乎倒腾,百度,总结以下步骤 1.启用guest账号 控制面板->用户账户->管理其他账户->Guest启用 2.设置共享文件夹 添加 ...

  3. jenkins管理员密码登录不了

    1.密码管理员密码,如何修改 进入/var/jenkins_home/users/admin目录下修改config.xml文件: 以下密码是admin <hudson.security.Huds ...

  4. promise(3) '静态'方法

    要是人没有梦想,跟咸鱼又有什么两样了?一直恐惧读源码,哪怕是一个简单的库也是读百来行遇到难点就放弃了.对于新的东西也仅仅是知道它拿来干什么,社区资源在哪里,要用时就突击文档资源使用即可.未有过深入之心 ...

  5. 导出CSV表格数据

    <?php class Csv{ //导出csv文件 public function put_csv($list,$title){ $file_name="CSV".date ...

  6. 团队开发冲刺2-----2day

    冲刺目标: 1.在第一阶段的基础上完成app内部界面设计. 2.逐步完成app内每一部分内容. 3.对app的实现进一步仔细钻研考虑. 4.对app每一部分内容模块化,分工在进一步明确. 5.设计好数 ...

  7. 我眼中的ASP.NET Core之微服务

    ### 前言 前几天在博客园看到有园友在分享关于微软的一个微服务架构的示例程序,想必大家都已经知道了,那就是[eShopOnContainers](https://github.com/dotnet- ...

  8. Vijos 1034 家族 并查集

    描述 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 规定:x和y是亲戚,y和z是亲戚,那么x和z也是亲戚.如果x,y是亲戚 ...

  9. Egret index.html设置

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  10. 集成 ssh第一阶段

    1.添加spring支持,包含spring-hibernate和spring-struts2.添加struts支持,包含struts-spring3.添加hibernate支持,在spring配置文件 ...