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

js中,我们可以给一个dom对象添加监听事件,函数就是

addEventListener("click",function(){},true);

很容易理解,第一个参数是事件类型,比如点击(click)、触摸(touchstart),

第二个参数就是事件函数,

比如我给一个button添加alert函数。

window.onload=function(){
document.getElementById("hello").addEventListener("onkeydown",function () {
alert("hello");
});
}

那么第三个参数是什么呢?这个参数设计到事件的捕获与冒泡,为true时捕获,false时冒泡。

什么意思呢?

我举个简单的例子,我有两个div和一个button,button在div2里面,div2在div1里面。如下图所示

给button、div1、div2、都添加了click事件,分别alert button、div1、div2。

window.onload=function(){
document.getElementById("btn").addEventListener("click",function () {
// body...
alert("hello");
});
document.getElementById("div1").addEventListener("click",function(){
alert("div1");
});
document.getElementById("div2").addEventListener("click",function(){
alert("div2");
});
}

那么问题就来了,我点击button,也相当于点击了div1和div2,那么,谁先出现呢?

直观的讲,谁在上面,谁在下面。

所以,在js中就分为了两个处理方法,冒泡和捕获。

冒泡:从里面往外面触发事件,就是alert的顺序是 button、div2、div1。

捕获:从外面往里面触发事件,就是alert的顺序是div1、div2、button。

要想冒泡,就要将每个监听事件的第三个参数设置为false,也就是默认的值。

要想捕获,就要将每个监听事件的第三个参数设置为true。

好了,就讲这么多了。为了更好的理解冒泡和捕获,大家可以给三个事件的第三个参数随便设置,就是说不同时设置为true或false,

给button为true,div1为false等等,根据结果就能更好的理解这两个概念了。

时间: 2024-10-10 09:24:39

js中addEventListener第三个参数涉及到的事件捕获与冒泡的相关文章

js中confirm揭示三个按钮“是”“否”“取消”

js中confirm提示三个按钮"是""否""取消" 重载DOM中confirm window.confirm = function(str) {   str=str.replace(/\'/g, "'&chr(39)&'").replace(/\r\n|\n|\r/g, "'&VBCrLf&'");   execScript("n = msgbox('"

addEventListener 的三个参数

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文就讲解它. <div id="outDiv">   <div id="middleDiv">     <div id="inDiv">请在此点击鼠标.</div>   </div> <

js中 单引号 双引号 参数问题 单引号 替换成 \&#39; 双引号 替换成 \&quot; 等

.replace(/\'/g, "\\'")    ->  ' 替换成  \' .replace(/\"/g, "\\\"")  ->  " 替换成\" 注:适用于 onclick='Test("数字双音\"")'  这种写法 .replace(/\"/g, """)  ->" 替换成 " 注:适用于onclick=&q

[转]Android中自定义样式与View的构造函数中的第三个参数defStyle的意义

转自:http://www.cnblogs.com/angeldevil/p/3479431.html Android中自定义样式与View的构造函数中的第三个参数defStyle的意义 零.序 一.自定义Style 二.在XML中为属性声明属性值 1. 在layout中定义属性 2. 设置Style 3. 通过Theme指定 三.在运行时获取属性值 1. View的第三个构造函数的第三个参数defStyle 2. obtailStyledAttributes 3. Example 四.结论与代

js中addEventListener中第3个参数

addEventListener中的第三个参 数是useCapture, 一个bool类型.当为false时为冒泡获取(由里向外),true为capture方式(由外向里). <div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4"> <div id="

JavaScript addEventListener 第三个参数作用

DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数. 这两个方法都需要三个参数,分别为: 事件名称(String).要触发的事件处理函数(Function).指定事件处理函数的时期或阶段(boolean). <!--打开新的浏览器窗口--> <button id="New" onclick="">点击弹窗</button> <!--关闭新的浏览器窗口--

【JS】Js中函数的三种调用方式

在同一个页面中,函数名必须是唯一的,并且区分大小写.Js中可以通过下面三种方式调用函数: 1. 函数的简单调用 2. 在事件的响应中调用函数 3. 通过连接调用函数 具体是怎么操作的呢,下面一一讲解: 函数的简单调用:函数的定义语句通畅被放在HTML文件的<head>内,而函数的调用语句通常被放在<body>中.如果函数定义之前调用函数,执行将会出错. 语法如下: <head> <script type="text/javascript">

Android中自定义样式与View的构造函数中的第三个参数defStyle的意义

零.序 系统自带的View可以在xml中配置属性,对于写的好的Custom View同样可以在xml中配置属性,为了使自定义的View的属性可以在xml中配置,需要以下4个步骤: 通过<declare-styleable>为自定义View添加属性 在xml中为相应的属性声明属性值 在运行时(一般为构造函数)获取属性值 将获取到的属性值应用到View 怎么将获取到的属性值应用到View就不用说了,自己定义的属性什么用处自己肯定是清楚的,所以接下来看一下前三点. 一.自定义Style 通过<

JS中的事件顺序(事件捕获与冒泡)

问题 如果一个元素和它的祖先元素注册了同一类型的事件函数(例如点击等), 那么当事件发生时事件函数调用的顺序是什么呢? 比如, 考虑如下嵌套的元素: ----------------------------------- | outer | | ------------------------- | | |inner | | | ------------------------- | | | ----------------------------------- 两个元素都有onclick的处理