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

<div id="outDiv">

  <div id="middleDiv">

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

  </div>

</div>



<div id="info"></div>
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>"; }, false);

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

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

上述是我们测试的代码，根据 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，则内层的触发先于外层。

下面提供全部代码，您可以更改其中的 true、false 值，来进行测试。注意，不适用于 IE。

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>useCapture</title>
<style type="text/css">
#outDiv
{
padding:10px 10px 10px 10px;
border:1px solid red;
}

#middleDiv
{
padding:10px 10px 10px 10px;
border:1px solid green;
}

#inDiv
{
padding:10px 10px 10px 10px;
border:1px solid blue;
}
</style>
</head>

<body>

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

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

<script language="javascript" type="text/javascript">
<!--
//千一网络 www.cftea.com

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>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);
//-->
</script>

</body>

</html>

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

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

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

  2. addEventListener 的三个参数

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

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

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

  4. JavaScript addEventListener 第三个参数

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

  5. addEventListener 第三个参数

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

  6. js-addEventListener()第三个参数useCapture

    概述: 第3个参数叫做useCapture,是一個boolean值,就是true or false .如果送出true的話就是瀏覽器會使用Capture方式,false的話是Bubbling,只有在特 ...

  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. [转]addEventListener的第三个参数

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

随机推荐

  1. odoo many2one

    在xml中使many2one字段  不可点击 不可跳转 options="{'no_open': True, 'no_create': True}"

  2. List--使用List作为堆栈和队列

    1,List作为堆栈 堆栈“先进后出”.对此,可以使用append和pop来操作数据. 不指定下标时,pop会先操作最后一个数据. 例如: 2,队列 队列“先进先出”.当然也可以使用append和po ...

  3. 基于宜搭的《T恤尺码收集》应用搭建

    简介: 在阿里,T恤是程序员必不可少的元素.每逢公司或者BU(部门)的重大节庆日,比如双11 .年会.新BU成立仪式.大型活动等,都会给员工定制发放统一的T恤或者POLO衫服装.而我们每次发放T恤之前 ...

  4. CSP-S模拟41影子，玫瑰花精题解

    题面:https://www.cnblogs.com/Juve/articles/11523567.html 影子: 暴力方法:枚举每一对点暴力统计最小权 优化:考虑并查集,枚举每个点,如果没有被访问 ...

  5. utils04_搭建私有Git服务器

    1.远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改.GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业公司来说,既不想公开源代码,又舍不得给G ...

  6. jq 实现头像（气泡式浮动）

    前提:假设每个头像都装在li中. function headMove() { $('li').each(function () { var myLeft = Math.floor(Math.rando ...

  7. RxJS 入门指引和初步应用

    作者:徐飞链接:https://zhuanlan.zhihu.com/p/25383159来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. RxJS是一个强大的React ...

  8. C++ Primer 阅读小结

    一.变量和基本类型 类型是C++程序设计的基础. 每种类型都定义了其存储空间要求和可以在该类型的所有对象上执行的操作.C++提供了一组基本内置类型,如int.char等.这些类型与它们在机器硬件上的标 ...

  9. DVWA 之high级别sql注入

                 Sqlmap 高级注入,抓包,然后保存数据到1.txt 1.判断注入点 sqlmap -r /root/1.txt -p id --second-order "ht ...

  10. javascript基础：事件

    事件: 概念:某些组件被执行了某些操作后,触发某些代码的执行 *  事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了 *  事件源:组件.如:按钮   文本输入框.... *  监听器:代码 * ...