[转]addEventListener的第三个参数
如果要把HTML元素的事件与某个函数绑定起来,可以有下面三种方法,以最常见的“点击”事件为例。
方法一:
直接在对应的HTML元素标签上绑定函数
1
|
< button id = 'submit' onclick = 'onClickFn()' >Click Me!</ button > |
方法二:
在JavaScript代码里面指定元素的“onclick”方法
1
2
3
|
var btn = document.getElementById( 'submit' ); btn.onclick = onClickFn; |
方法三:
使用事件监听绑定方法
1
2
3
|
var btn = document.getElementById( 'submit' ); btn.addEventListener( 'click' , onClickFn, false ); |
三种方法都可以在button被点击的时候调用onClickFn函数,但是有所区别。
第一种方法不推荐,因为违反了HTML与JavaScript分离的准则;
第二种方法只能给一个事件绑定一个响应函数,重复绑定会覆盖之前的绑定;
第三种方法比较推荐,可以绑定多个不同的函数。
不过退步推荐不是重点,重点是第三种方法中的第三个参数为何是“false”?
当鼠标点击所看到的的按钮时,其实发生了一系列的事件传递,可以想象一下,button实际上是被body“包裹”起来的,body是被html“包裹”起来的,html是被document“包裹”起来的,document是被window“包裹”起来的。所以,在你的鼠标点下去的时候,最先获得这个点击的是最外面的window,然后经过一系列传递才会传到最后的目标button,当传到button的时候,这个事件又会像水底的泡泡一样慢慢往外层穿出,直到window结束。
综上,一个事件的传递过程包含三个阶段,分别称为:
捕获阶段,目标阶段,冒泡阶段
目标指的就是包裹得最深的那个元素。
假设HTML有如下元素:
1
2
3
4
5
|
< div id = 'd' > < p id = 'p' > < span id = 's' >Click Me!</ span > </ p > </ div > |
JavaScript代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
var div = document.getElementById( 'd' ); var p = document.getElementById( 'p' ); var span = document.getElementById( 's' ); function onClickFn (event) { var tagName = event.currentTarget.tagName; var phase = event.eventPhase; console.log(tagName, phase); } div.addEventListener( 'click' , onClickFn, false ); p.addEventListener( 'click' , onClickFn, false ); |
此时,点击“Click Me!”,即可在控制台看到如下结果:
1
2
|
P 3 DIV 3 |
其中“3”和“冒泡阶段”对应。
可以看出,p和div都是在冒泡阶段相应了事件,由于冒泡的特性,裹在里层的p率先做出响应。
如果把上面代码里面中addEventListener的第三个参数设置为true,那么运行的结果如下:
1
2
|
DIV 1 P 1 |
由此,addEventListener的第三个参数设置为true和false的区别已经非常清晰了:
true表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件;
false表示该元素在事件的“冒泡阶段”(由内向外传递时)响应时间。
至此,你可能会有疑问,还有一个“目标阶段”呢?
您不妨给span元素绑定事件,自己测试一下。
在冒泡阶段,如果不希望事件继续往上传播,例如,冒泡的p的时候就停止传播,那么,可以在p的事件回调函数里面这么写:
1
2
3
4
|
function onClickFn (event) { // code here event.stopPropagation(); } |
这样,冒泡到p的时候,就不会再向上传播了,即,div不会收到冒泡上来的click事件。
如果还想把其它与p绑定的响应函数的事件也“屏蔽”掉,需要把stopPropagation换为stopImmediatePropagation。
来源:
http://my.oschina.net/u/1454562/blog/205010
可参考:
http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/
[转]addEventListener的第三个参数的更多相关文章
- addEventListener-第三个参数 useCapture
转载自:http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.aspaddEventListener-开始 addEventListener-事件流 addE ...
- addEventListener的第三个参数详解
示例代码 element.addEventListener("mousedown", func, { passive: true }); element.addEventList ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- addEventListener 的三个参数
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- JS003. 事件监听和监听滚动条的三种参数( addEventListener( ) )
全局 1 window.addEventListener('scroll', () => { 2 console.log('------') 3 console.log(document.doc ...
- addListener添加事件监听器,第三个参数useCapture (Boolean) 的作用
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- Android中自定义样式与View的构造函数中的第三个参数defStyle的意义
零.序 一.自定义Style 二.在XML中为属性声明属性值 1. 在layout中定义属性 2. 设置Style 3. 通过Theme指定 三.在运行时获取属性值 1. View的第三个构造函数的第 ...
- setTimeout 第三个参数 改变setTimeout的作用对象 控制下拉框的关闭
setTimeout第三个参数,可以作为setTimeout延时执行函数的传入参数使用,利用这个设定,我们可以将要延时改变状态的对象传入,变相改变setTimeout的作用对象:这里setTimeou ...
- nfs 三个参数权限
遇到nfs客户端不可写的情况. 有延迟啊啊啊.. 等1min左右就可以写了. 挂载参数: cat /var/lib/nfs/etab -->server cat /proc/mounts ...
随机推荐
- 分区容量大于16TB的格式化
File systems do have limits. Thats no surprise. ext3 had a limit at 16 TB file system size. If you n ...
- DWR3.0(Direct Web Remoting)实践
“DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and c ...
- ReactiveCocoa入门教程——第二部分【转载】
ReactiveCocoa是一个框架,它能让你在iOS应用中使用函数响应式编程(FRP)技术.在本系列教程的第一部分中,你学到了如何将标准的动作与事件处理逻辑替换为发送事件流的信号.你还学到了如何转换 ...
- 新手学习JSP+Servlet笔记一
作为一个新手,初次接触jsp,servlet,习惯了后台的开发,前台的知识一窍不通,利用闲暇时间,给自己补补,从MyEclipse开始. 安装好MyEclipse之后,没有安装程序的可以下载 http ...
- erlang处理mongodb日期时间格式data类型(原)
在项目中,mongo中要创建日期类型,根据这个日期类型进而对mongo设置过期时间expire,加上对应的index索引自动删除. 而mongo中的日期类型,使用ISO格式,例如:ISODate(&q ...
- WebRTC for android ios开发官方指南
The WebRTC native code package can be found at: https://chromium.googlesource.com/external/webrtc ht ...
- 华为基于策略划分VLAN的配置方法及示例
学过思科交换机的朋友,可能对基于策略划分VLAN的配置方法印象非常深,感觉确实比较复杂,先要配置VMPS以及VMPS数据库,但在华为交换机中,这种现象得到了彻底改变,因为它有了一种特殊的端口类型—— ...
- C#判断WebService接口是否可用
using MSXML2; public bool InterfaceEnble() { string url = "http://localhost:81/WebServiceLogin. ...
- OIer同样是音乐家
烦闷的时候,shenben为大家准备了2首歌(不用耳机也能听哦) 只需把代码复制到dev-c++的编辑器上,轻按F11,然后聆听OIer的音乐…… 千本樱 曲谱 #include <cstdio ...
- Mybatis之基本简介
一.Mybatis简介 MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架.MyBatis 摒除了大部分的JDBC代码.手工设置参数和结果集重获.MyBatis 只使用简单的XML ...