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. Gparted for partition of Linux on graphic interface

    You can change the partition table on Linux by a group of tools, which is tool comprehansive for a n ...

  2. sh_02_第2个Python程序

    sh_02_第2个Python程序 print("hello")

  3. 详细讲解Android中的AbsListView的源码

    不知道各位童鞋们在开发的过程中有没有感兴趣过ListView是如何实现的呢?其实本身ListView的父类AbsListView才是关键,但是如果大家看过源码的话,会发现AbsListView将近70 ...

  4. [LOJ2288][THUWC2017]大葱的神力：搜索+背包DP+费用流+随机化

    分析 测试点1.2:搜索+剪枝. 测试点3:只有一个抽屉,直接01背包. 测试点4.5:每个物品体积相同,说明每个抽屉能放下的物品个数固定,建图跑费用流. 测试点6:每个物品体积相近,经过验证发现每个 ...

  5. Solr搜索引擎基础

    搜索引擎是指一个庞大的互联网资源数据库,如网页,新闻组,程序,图像等.它有助于在万维网上定位信息. 用户可以通过以关键字或短语的形式将查询传递到搜索引擎中来搜索信息. 搜索引擎然后搜索其数据库并向用户 ...

  6. ionic slide组件使用

    ionic学习使用笔记 slide 组件的使用   开始做的时候,遇到了个要用ionic实现 有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又 ...

  7. 500 cannot be cast to javax.xml.registry.infomodel

    在使用mybatis的时候每次一调用一个返回User类型的sql时,总是会报错如下: com.xx.all.domain.User cannot be cast to javax.xml.regist ...

  8. qcom Android Camera【转】

    本文转载自:http://blog.csdn.net/Wilsonboliu/article/details/54949196 1.总体架构 Android Camera 框架从整体上看是一个 cli ...

  9. rm命令反向选择删除文件

    反向删除文件, 参考这篇文章. http://blog.csdn.net/web_go_run/article/details/46009723 shopt是设置shell的全局选项 shopt -p ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第6节 Lambda表达式_1_函数式编程思想概述

    函数式编程和面向对象的区别