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

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. document事件及例子

    一.关于鼠标事件:onclick:鼠标单击触发 ondbclick:鼠标双击触发 onmouseover:鼠标移上触发 onmouseout:鼠标离开触发 onmousemove:鼠标移动触发 二.关 ...

  2. kubeadm 安装1.6.0版本出错 未解决

    工具包已经安装好了. [root@master data]# rpm -qa |grep kubekubeadm-1.6.0-0.x86_64kubectl-1.6.0-0.x86_64kubelet ...

  3. Kubernetes 设计概要

    英文原文:Kubernetes Design Overview Overview Kubernetes builds on top of Docker to construct a clustered ...

  4. 数据结构与算法(c++)——查找二叉树与中序遍历

    查找树ADT--查找二叉树 定义:对于树中的每个节点X,它的左子树中的所有项的值小于X中的项,而它的右子树中所有项的值大于X中的项. 现在给出字段和方法定义(BinarySearchTree.h) # ...

  5. Intel VT-x 处于禁用状态

    出现错误"此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态"的问题,如下图. Intel VT-x 即Virtualization Technology, ...

  6. 前端UI组件复用工具

    "懒"是第一生产力. 代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现UI组件的复用. 通常我们所说的组件往往是包含业务逻辑的前端组件,而这 ...

  7. react实现双向绑定

    双向绑定功能是在项目中比较常见的一个需求,传统的js实现方式是添加监听函数的方式,Vue框架实现很简单,因为它本身就是基于双向绑定实现的,接下来我将讲解一下如何使用react实现双向绑定的功能是 首先 ...

  8. 开源框架GreenDao的操作

    1.为什么需要GreenDao?Google原生API不方便 @1手动组拼SQL语句 @2需要自己写操作数据库代码 @3不能把数据库中的数据映射成对象 @4没有实现关联查询 2.GreenDao是什么 ...

  9. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  10. PHP加密解密的函数

    <?php class Encryption { /* *功能:对字符串进行加密处理 *参数一:需要加密的内容 *参数二:密钥 */ function encrypt($str,$key){ / ...