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

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: 易用设置

    Mac是一个类unix系统,因此很多命令是类似于Linux的.例如其中的Terminal, shell等等.但是软件源鉴于国内的网络环境,是不方便配置的. 中文输入法快速切换. 在不同的语言中可以用组 ...

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

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

  3. explode和implode的运用

    $kesu_list=DD('Kesu.Kesu')->kesu_list(); foreach($kesu_list[0] as $key=>$val){ $reason_id_list ...

  4. 关于cookie与session的理解

    服务器端并不能捕获客户端的浏览器关闭事件,因此你关闭浏览器以后,服务器端那个Session还是存在的,要超时以后才被回收,启动一个新的浏览器会启动一个新的session,所以他不认你了session永 ...

  5. celery的使用

    1.celery的任务调度 # -*- coding: utf-8 -*- import threading from bs4 import BeautifulSoup from tornado im ...

  6. [leetcode-553-Optimal Division]

    Given a list of positive integers, the adjacent integers will perform the float division. For exampl ...

  7. kindeditor使用入门-张国红

    kindeditor是在线编辑器,比较好用,以下是使用这个插件的步骤. 下载kindeditor-4.1.10.zip 解压 asp,asp.net,php对于jsp开发没有用,可以删除 新建web工 ...

  8. Linux配置虚拟地址

    立即生效: [root@server ~]$ 192.168.1.101 broadcast 192.168.1.255 netmask 255.255.255.0 up [root@server ~ ...

  9. Vuejs——Vue生命周期，数据，手动挂载，指令，过滤器

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   原教程: http://cn.vuejs.org/guide/instance.html htt ...

  10. tp5实现邮件发送

    项目中,用户修改密码,需要发送验证码到用户邮箱,于是就看了看,在此记录一下. 1.开启SMTP服务 测试用的是自己的qq邮箱,首先需要开启邮箱的SMTP服务,开启之后,要记得给你的授权码,授权码一定要 ...