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

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. angularjs下拉框空白

    搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" n ...

  2. javascript对象(1)

    今天说面向对象,嗯,不是那个对象,是这个对象. 接下来就开始今天的内容: 什么是面向对象: 就是把数据及数据的操作方法放在一起,作为一个相互依存的整体----对象.对同类对象抽象出其共性,形成类. 类 ...

  3. 高考志愿填报：java 软件 程序员 目前的就业现状

    大约在17年前,也就是2000年,学计算机专业的学生可以有大部分都进入本专业,并且就业非常容易.哪怕只会office套件,想找个工作也很简单.那时候学计算机就是最热门的行业. 那时候,搞Java的还是 ...

  4. 推荐几款.NET客户端开源报表图

    如果你正在开发客户端报表图相关的应用,除了.NET自带的控件,你还可以考虑使用以下几个控件库. [OxyPlot] OxyPlot是一个支持.NET的跨平台绘图库.你可以在很多平台上使用它,如WPF, ...

  5. jquery元素是否可见(隐藏)

    var temp1=$(".view_hidden").is(":visible");//是否可见 var temp2=$(".elem_id&quo ...

  6. EntityFramework.Extended.Update.Ambiguous column name

    异常描述 c#代码 dbcontext.Table.Where(x => x.B > 0).Update( x => new Table() { A = x.B } )  抛出异常: ...

  7. [leetcode-561-Array Partition I]

    Given an array of 2n integers, your task is to group these integers into n pairs of integer,say (a1, ...

  8. bootstrap table 插件多语言切换

    在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...

  9. 排序算法总结及Java实现

    1. 整体介绍 分类 排序大的分类可以分为两种,内排序和外排序.在排序过程中,全部记录存放在内存,则称为内排序,如果排序过程中需要使用外存,则称为外排序.主要需要理解的都是内排序算法: 内排序可以分为 ...

  10. VB6之调整任务栏按钮的位置

    好无聊,睡前一更~ XP的任务栏没办法像win7那样随意拖动交换顺序,偶觉不爽,遂写程序搞之.这个不算什么新东西,参考了很多别人写的东东. 程序启动后,会在右下角托盘区显示钢铁侠的图标.右键击之,可选 ...