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. 全栈之路-微信小程序-SKU开发（分析）

    SKU是整个小程序中最难完成的部分了,好好记录一下SKU,主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程,至于代码什么的,记录也好,不记录也行,再看! 一.从思路说起 1.SK ...

  2. 程序员总数3W+，阿里巴巴首次公开2018代码数据报告

  3. 获取请求header的各种方法

    部分代码非原创  不定期更新 PHP function get_all_header() { // 忽略获取的header数据.这个函数后面会用到.主要是起过滤作用 $ignore = array(' ...

  4. 【JAVA】Class.getResource()与ClassLoader.getResource()的区别

    转载自:https://blog.csdn.net/qq_33591903/article/details/91444342 Class.getResource()与ClassLoader.getRe ...

  5. 可持久化线段树的学习（区间第k大和查询历史版本的数据）（杭电多校赛第二场1011）

    以前我们学习了线段树可以知道,线段树的每一个节点都储存的是一段区间,所以线段树可以做简单的区间查询,更改等简单的操作. 而后面再做有些题目,就可能会碰到一种回退的操作.这里的回退是指回到未做各种操作之 ...

  6. PAT甲级——A1052 Linked List Sorting

    A linked list consists of a series of structures, which are not necessarily adjacent in memory. We a ...

  7. 警告: [SetPropertiesRule]{Context/Loader} Setting property 'useSystemClassLoaderAsParent' to 'false' did not find a matching property.

    警告: [SetPropertiesRule]{Context/Loader} Setting property 'useSystemClassLoaderAsParent' to 'false' d ...

  8. odoo web controller

    Routing openerp.http.route(route=None, **kw) Decorator marking the decorated method as being a handl ...

  9. dl, dt, dd /line-height /loat /vertical-align 问题

    刚刚在看张鑫旭大神的个人网站,看到一篇关于“css瓶颈”的深度好文,地址为:http://www.zhangxinxu.com/wordpress/?p=2523 关于张大神在文章里面提到的四个问题: ...

  10. linux 下环境变量设置

    Ubuntu Linux系统包含两类环境变量:系统环境变量和用户环境变量.系统环境变量对所有系统用户都有效,用户环境变量仅仅对当前的用户有效. 修改用户环境变量 用户环境变量通常被存储在下面的文件中: ...