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

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

  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. Mac远程连接windows报错“证书或相关链无效，是否仍要连接到此计算机”的处理办法。

    这个主要是因为策略组设置的问题.详细的设置方法如下: 本地计算机策略>计算机配置>管理模板>windows组件>远程桌面服务>远程桌面会话主机>安全>远程(R ...

  2. Blockly编程：用Scratch制作游戏愤怒的小牛（小鸟）

    愤怒的小鸟曾经很热门,网上还说他是程序员最喜欢玩的游戏.最先我是WIKIOI的评测页面看到他的,后来在2014年全国信息学奥林匹克联赛第一天第三题飞扬的小鸟也看到了它.因此,突然想做一个类似愤怒的小鸟 ...

  3. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  4. (cljs/run-at (JSVM. :browser) "搭建刚好可用的开发环境!")

    前言  书接上一回,在了解cljs基本语法后并在clojurescript.net的奇特错误提示后,我们必须痛定思痛地搭建一个本地的开发环境,以便后续深入地学习cljs. 现有的构建工具  由于浏览器 ...

  5. 【css技能提升】css高级技巧

    本文是一个帮你提升 CSS 技巧的收藏集. 使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格.您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法: * ...

  6. 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢，在Bootstrap模态框内部多次点击才能触发的问题

    WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...

  7. Java IO在实际开发中的应用

    IO是java绕不过去的槛,在开发中io无处不在, 正如同 世界上本没有路,java io写多了,也就知道了大体是什么意思,在读完thinking in java 感觉就更清晰了,结合具体的业务场景, ...

  8. 基于Http协议订阅发布系统设计

      基于Http协议订阅发布系统设计 --物联网系统架构设计   1,订阅发布(subscriber-publisher)      订阅发布模式最典型的应用场景就是消息系统的设计.在消息系统的架构中 ...

  9. CSS命名实践

    前面的话 每次写HTML结构涉及到CSS命名时,都要挣扎一番.关于CSS命名的规范,市面上有不少,如OOCSS.SMACSS.BEM和MVCSS等.在这里面最火的应该算BEM了.本文将详细介绍CSS命 ...

  10. Android性能优化：ViewStub

    在开发应用程序的时候,经常会遇到这样的情况,会在运行时动态根据条件来决定显示哪个View或某个布局.那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为View.GONE,然后在 ...