addEventListener 的三个参数
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 的三个参数的更多相关文章
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- addEventListener 第三个参数
addEventListener api target.addEventListener(type, listener[, options]); target.addEventListener(typ ...
- JavaScript addEventListener 第三个参数
先看一个完整的演示页面代码. Code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
- addEventListener－第三个参数 useCapture
转载自:http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.aspaddEventListener-开始 addEventListener-事件流 addE ...
- addListener添加事件监听器，第三个参数useCapture (Boolean) 的作用
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- [转]addEventListener的第三个参数
如果要把HTML元素的事件与某个函数绑定起来,可以有下面三种方法,以最常见的“点击”事件为例. 方法一: 直接在对应的HTML元素标签上绑定函数 ? 1 <button id='submit' ...
- addEventListener的第三个参数详解
示例代码 element.addEventListener("mousedown", func, { passive: true }); element.addEventList ...
- JS003. 事件监听和监听滚动条的三种参数（ addEventListener( ) ）
全局 1 window.addEventListener('scroll', () => { 2 console.log('------') 3 console.log(document.doc ...
- Android中自定义样式与View的构造函数中的第三个参数defStyle的意义
零.序 一.自定义Style 二.在XML中为属性声明属性值 1. 在layout中定义属性 2. 设置Style 3. 通过Theme指定 三.在运行时获取属性值 1. View的第三个构造函数的第 ...
随机推荐
- TweenMax的GSAP（GreenSock动画平台）GSAP，专业的Web动画库
很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...
- java构造方法和重写equals
Cell的构造函数 package Test; import java.util.Objects; public class Cell { int a; int b; public int getA( ...
- jquery获取元素
let $lis = $('#sidebar-menu li[to]')//获取sidebar-menu下包含to属性的li
- linux入门 一些常见命令
chvt 切换终端 用法 1是终端 7是图形界面 sudo chvt 1 or 7 cp 复制文件/目录 -a : 通常在复制目录时使用,保存链接,文件属性并递归复制目录 -f:若文件在目标路径中则强 ...
- 【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 ...
- Navicat Premuim远程连接oracle 提示 cannot load oci dll,193的解决方法
转载:http://blog.51cto.com/xiao987334176/1640991 内网有一台windows server 2012,安装了Navicat 11.1.8 连接oracle的时 ...
- Collections 索引
About Me NOIp 数据结构专题总结 NOIp 图论算法专题总结 NOIp 基础数论知识点总结 NOIp 数学知识点总结 搜索算法总结 (不包含朴素 DFS, BFS) 位运算 字符串算法总结 ...
- Linux新增用户，并设置Root（管理员）权限
在使用Linux过程中,Root账号拥有最大的操作权限.为保证Root账号安全,一般不直接使用Root账号,而是直接创建一个拥有Root权限的其它账号来使用.详细操作步骤如下 第一步,创建用户,如下图 ...
- springSecurity总结
springSecurity总结: 一.Spring security框架简介 1.简介 一个能够为基于Spring的企业应用系统提供声明式的安全訪问控制解决方式的安全框架(简 ...
- 模拟赛DAY1 T1大美江湖
这就是一个模拟题,注意1234分别对应左右上下横坐标和纵坐标的判断就好了 题解: 需要注意的是,向上取整ceil函数是对于一个double值返回一个double值,也就是说在ceil里面的类型一定要是 ...