addEventListener-第三个参数 useCapture
- 转载自:http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.aspaddEventListener-开始
- addEventListener-事件流
- addEventListener-第三个参数 useCapture
- addEventListener-event 对象的属性和方法
- addEventListener-有用的笔记
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 useCapture,本文就讲解它。
<div id="middleDiv">
<div id="inDiv">请在此点击鼠标。</div>
</div>
</div>
<div id="info"></div>
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。
<!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的更多相关文章
- addListener添加事件监听器,第三个参数useCapture (Boolean) 的作用
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- addEventListener 的三个参数
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- JavaScript addEventListener 第三个参数
先看一个完整的演示页面代码. Code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
- addEventListener 第三个参数
addEventListener api target.addEventListener(type, listener[, options]); target.addEventListener(typ ...
- js-addEventListener()第三个参数useCapture
概述: 第3个参数叫做useCapture,是一個boolean值,就是true or false .如果送出true的話就是瀏覽器會使用Capture方式,false的話是Bubbling,只有在特 ...
- addEventListener的第三个参数详解
示例代码 element.addEventListener("mousedown", func, { passive: true }); element.addEventList ...
- JS003. 事件监听和监听滚动条的三种参数( addEventListener( ) )
全局 1 window.addEventListener('scroll', () => { 2 console.log('------') 3 console.log(document.doc ...
- [转]addEventListener的第三个参数
如果要把HTML元素的事件与某个函数绑定起来,可以有下面三种方法,以最常见的“点击”事件为例. 方法一: 直接在对应的HTML元素标签上绑定函数 ? 1 <button id='submit' ...
随机推荐
- Python-基本文件处理
目录 文件的类型 什么是文件? 文件的分类 文件的打开与关闭 文件处理的三个步骤 使用方式 爬虫 requests库的使用 文件的类型 什么是文件? 一堆.py/.txt 存储着文字信息文件, 文件的 ...
- vue 编写插件
1. 将插件逻辑封装成一个对象 最后在install编写业务代码暴露给Vue对象 好处: 可以添加任意参数在这个对象上 方便将install函数封装的更加精简 可拓展性也比较高 2. 将所有 ...
- oslo_messaging使用eventlet executor时rpc无法调用的问题
python2.7.5 oslo.messaging==9.8.0 现象: 从debug日志可以看到rpcServer接收到了rabbitmq的消息, 但是没有调用endpoints中的相应方法 分析 ...
- opencv读取的彩色图像,数据是GBR而不是RGB
开发久了,容易想当然 直到数据怎么也不对的时候,才想起来查一下手册 三个像素,当然没有这么大的像素,这是放大之后的 数据输出
- hdu3853之概率dp入门
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xingyeyongheng/article/details/25205693 LOOPS Time ...
- MySQL用户权限详细汇总
1,MySQL权限体系 mysql 的权限体系大致分为5个层级:全局层级:全局权限适用于一个给定服务器中的所有数据库.这些权限存储在mysql.user表中.GRANT ALL ON .和REVOKE ...
- 关于apache kylin 安装32位linux办法
最近公司在使用apache kylin做实时开发访问,但是自己集群是linux32 只能安装JDK32位的受限只能3G多内存,而apachekylin 默认是4G内存,需要JDK64位支持. 解决办法 ...
- 在云计算环境中使用Hadoop
- openCV图像合成
#include <iostream> #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.h ...
- bzoj 4241 历史研究——分块(区间加权众数)
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4241 套路:可以大力预处理,如果求区间加权众数,可以预处理i~j块(或 j 位置)的最大值, ...