addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture，本文就讲解它。

<body>

<div id="outDiv">

  <div id="middleDiv">

    <div id="inDiv">请在此点击鼠标。</div>

  </div>

</div>

<div id="info"></div>

<script>

        var outDiv = document.getElementById("outDiv");

    var middleDiv = document.getElementById("middleDiv");

    var inDiv = document.getElementById("inDiv");

    var info = document.getElementById("info");

    outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, true);

    middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);

    inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, true);

</script>

</body>

上述是我们测试的代码，根据 info 的显示来确定触发的顺序，有三个 addEventListener，而 useCapture 可选值为 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。

  • 全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；

  • 全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；

  • outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；

  • middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；

  • ……

最终得出如下结论：

  • true 的触发顺序总是在 false 之前；

  • 如果多个均为 true，则外层的触发先于内层；

  • 如果多个均为 false，则内层的触发先于外层。

addEventListener 的三个参数的更多相关文章

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

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

  2. addEventListener 第三个参数

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

  3. JavaScript addEventListener 第三个参数

    先看一个完整的演示页面代码. Code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

  4. addEventListener－第三个参数 useCapture

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

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

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

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

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

  7. addEventListener的第三个参数详解

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

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

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

  9. Android中自定义样式与View的构造函数中的第三个参数defStyle的意义

    零.序 一.自定义Style 二.在XML中为属性声明属性值 1. 在layout中定义属性 2. 设置Style 3. 通过Theme指定 三.在运行时获取属性值 1. View的第三个构造函数的第 ...

随机推荐

  1. Task7.手写数字识别

    用PyTorch完成手写数字识别 import numpy as np import torch from torch import nn, optim import torch.nn.functio ...

  2. dnsmasq+Stunnel+sniproxy加密代理

    一.环境介绍 [root@kimissVPN ~]# cat /etc/redhat-release CentOS release 6.8 (Final) [root@kimissVPN ~]# un ...

  3. Activiti7入门(五)

    1 创建流程 首先选中存放图形的目录(本次我们选择 resources 下的 bpmn 目录),点击菜单: New-BpmnFile,如下图所示: 起完名字 holiday 后(默认扩展名为 bpmn ...

  4. Activiti创建表(三)

    创建Mysql 创建 mysql 数据库 activiti(名字任意):CREATE DATABASE activiti DEFAULT CHARACTER SET utf8; pom.xml < ...

  5. 电脑新安装JDK版本并运行使用该JDK版本问题

    情景:电脑上已正常安装一个jdk版本,如:1.7.0_71,因考虑到一些情况,现需要使用版本为1.7.0_80(1.8),故需新安装JDK,并使服务可以运行使用新安装的JDK版本. 网络找寻方法: ( ...

  6. 1.Windows下安装nginx

    1.  到nginx官网http://nginx.org/上下载相应的安装包 下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在了d盘根目录下,如下图所示:   进入window的cm ...

  7. 转载：PICT使用教程（设计测试用例工具）

    原文:https://blog.csdn.net/quiet_girl/article/details/50699543 之前一篇写了正交设计助手的使用教程,与正交设计助手相比,个人觉得PICT的使用 ...

  8. TimeUtils

    public class TimeUtils { public static final int YEAR = 0; public static final int MONTH = 1; public ...

  9. jetty 启动时出现的问题

    启动时出现: 1.  NoClassDefFoundError: javax/xml/registry/infomodel/User 是需要导入jaxr-api包, <dependency> ...

  10. TypeError: list indices must be integers or slices, not str

    错误如下: TypeError: list indices must be integers or slices, not str 错误代码块: aa是一组list套dict数据 函数insert接收 ...