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. 手把手搭建K3cloud插件开发环境

    最近几天在配置K3cloud开发环境,发现不论是产品论坛还是百度出来的结果,都不够满意,很多大咖给提供的环境搭建手册都是那个云山雾罩的PPT 也就是这个open.kingdee.com/K3Cloud ...

  2. 有了二叉查找树、平衡树（AVL）为啥还需要红黑树？

    序言 二叉查找树的缺点 平衡二叉树 虽然平衡树解决了二叉查找树退化为近似链表的缺点,能够把查找时间控制在 O(logn),不过却不是最佳的,因为平衡树要求每个节点的左子树和右子树的高度差至多等于1,这 ...

  3. JSP上传整个文件夹

    文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用 ...

  4. Java——抽象类

    [抽象类] 抽象类中方法有定义的必要,但是没有实现的必要,因为需要子类进行重写.

  5. Activiti7整合SpringBoot(十二)

    1 SpringBoot 整合 Activiti7 的配置 为了能够实现 SpringBoot 与 Activiti7 整合开发,首先我们要引入相关的依赖支持.所以,我们在工程的 pom.xml 文件 ...

  6. 【CF10D】LCIS（LCIS）

    题意:求两个序列的LCIS n,m<=300,a[i]<=1e9 题意:O(n^2) O(n^3)的话设dp[i,j]为A终点为a[1..i]且B终点为b[j]的最大长度,分a[i]==b ...

  7. 长链剖分优化树形DP总结

    长链剖分 规定若\(x\)为叶结点,则\(len[x]=1\). 否则定义\(preferredchild[x]\)(以下简称\(pc[x]\),称\(pc[x]\)为\(x\)的长儿子)为\(x\) ...

  8. Conturbatio

    Conturbatio Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  9. Handling Configuration Changes with Fragments

    This post addresses a common question that is frequently asked on StackOverflow: What is the best wa ...

  10. jQuery实现三级联动菜单（鼠标悬停联动）

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...