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. Python-基本文件处理

    目录 文件的类型 什么是文件? 文件的分类 文件的打开与关闭 文件处理的三个步骤 使用方式 爬虫 requests库的使用 文件的类型 什么是文件? 一堆.py/.txt 存储着文字信息文件, 文件的 ...

  2. vue 编写插件

    1.    将插件逻辑封装成一个对象  最后在install编写业务代码暴露给Vue对象 好处: 可以添加任意参数在这个对象上 方便将install函数封装的更加精简 可拓展性也比较高 2.  将所有 ...

  3. oslo_messaging使用eventlet executor时rpc无法调用的问题

    python2.7.5 oslo.messaging==9.8.0 现象: 从debug日志可以看到rpcServer接收到了rabbitmq的消息, 但是没有调用endpoints中的相应方法 分析 ...

  4. opencv读取的彩色图像，数据是GBR而不是RGB

    开发久了,容易想当然 直到数据怎么也不对的时候,才想起来查一下手册 三个像素,当然没有这么大的像素,这是放大之后的 数据输出

  5. hdu3853之概率dp入门

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xingyeyongheng/article/details/25205693 LOOPS Time ...

  6. MySQL用户权限详细汇总

    1,MySQL权限体系 mysql 的权限体系大致分为5个层级:全局层级:全局权限适用于一个给定服务器中的所有数据库.这些权限存储在mysql.user表中.GRANT ALL ON .和REVOKE ...

  7. 关于apache kylin 安装32位linux办法

    最近公司在使用apache kylin做实时开发访问,但是自己集群是linux32 只能安装JDK32位的受限只能3G多内存,而apachekylin 默认是4G内存,需要JDK64位支持. 解决办法 ...

  8. 在云计算环境中使用Hadoop

  9. openCV图像合成

    #include <iostream> #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.h ...

  10. bzoj 4241 历史研究——分块（区间加权众数）

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4241 套路:可以大力预处理,如果求区间加权众数,可以预处理i~j块(或 j 位置)的最大值, ...