DOM: EVENT FLOW
捕获阶段(capture phase)
捕获阶段的定义如下(w3c):The event object propagate through the target's ancestors from the defaultView to the target's parent.
文章开头的例子里面,捕获阶段的click事件会依次在document、body、div上触发:
document 1
v
body 2
v
div 3
v
button
addEventListener
的第三个参数设置为true:// 第三个参数设置是否为捕获阶段,默认为false
element.addEventListener('click', function() {}, true)
目标阶段(target phase)
目标阶段的定义是(w3c):The event object arrive at the event object's event target.事件对象到达事件目标。
例子里面,就是事件在button上触发的。addEventListener
可以监听目标阶段的事件:
element.addEventListener('click', function() {})
如果事件是不可冒泡的,那整个事件流动会到此为止,不会发生下面的冒泡阶段。
冒泡阶段(bubble phase)
冒泡阶段的定义(w3c):The event object propagates through the target's ancestors in reverse order, starting with the target's parent and ending with the defaultView.
事件对象会在事件目标的祖先元素里反向传播,由开始的父元素到最后的defaultView(document)。
冒泡阶段发生在最后,在这阶段里事件会从子(分支)到父(主干)逆向传播,看起来像是一个水里的泡泡往上冒。
例子里面,冒泡阶段的click事件会依次在div、body、document上触发:
document 3
^
body 2
^
div 1
^
button
"bubbles"
Event下的bubbles属性标明该事件是否为可冒泡的。一旦该值为false,则说明 evnet不可冒泡,那其流动也会在第二阶段“目标阶段”后就终止。
作者:butterandfly
链接:https://www.jianshu.com/p/382895a4027d
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处
DOM: EVENT FLOW的更多相关文章
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- Javascript——浅谈 Event Flow
1.Javascript Events : Event Bubbling(事件冒泡) 如果事件从最特定的元素开始,则事件流中的一个阶段称为事件冒泡(DOM中可能最深的节点)然后向上流向最不特定的节点( ...
- 关于 javascript event flow 的一个bug
[1]描述了firefox,safari 有一个bug和DOM 3 规范不一致:在event.currentTarget等于event.target的时候(即event flow处于target ph ...
- event flow
JS之event flow DOM事件流 1.定义: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事 ...
- JavaScript之HTML DOM Event
当鼠标在button上点击时,会在button上触发一个click事件.但是button是div的一个子元素, 在button里点击相当于在div里点击,是否click事件也会触发在div上?如果cl ...
- [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用
[DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用 jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...
- [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event
[DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event 事件 事件(Event)是用来通知代码,一些有趣的事情发生了. 每一个Event都会被一个E ...
- [DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法
[DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法 网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一 ...
- HTML DOM Event对象
我们通常把HTML DOM Event对象叫做Event事件 事件驱动模型 事件源:(触发事件的元素)事件源对象是指event对象 其封装了与事件相关的详细信息. 当事件发生时,只能在事件函数内部访问 ...
随机推荐
- HALCON串口通讯程序
串口通讯程序 * Note: This example is meant to demonstrate the use of the serial interface * of HALCON. ...
- PKU 1204 Word Puzzles(AC自动机)
题目大意:原题链接 给定一个字符串矩阵和待查找的单词,可以朝8个不同的方向查找,输出待查找单词第一个字母在矩阵中出现的位置和该单词被查到的方向. A~H代表8个不同的方向,A代表正北方向,其他依次以4 ...
- ruby中的顶层方法
在ruby中写顶层函数的时候,总会有一个问题,self是谁,这些方法是谁的,是什么方法. 如下: p self p self.class def talk p self end talk 输出main ...
- Centos 6.5 Install Mysql 8.0.0
依赖包 yum install numactl libaio perl-Time-HiRes per-devel -y 下载对应系统版本下载 wget http://cdn.mysql.com//Do ...
- 粗略介绍Java AQS的实现原理
本文转自 http://www.importnew.com/24006.html 感谢作者 对我很有帮助 ①引言 AQS是JDK1.5提供的一个基于FIFO等待队列一个同步器的基础框架,java中的同 ...
- Java Vertor详细介绍和使用示例
①对Vector有个整体认识 Vector是向量类,继承于AbstractList,实现了List,RandomAccess,Clonable这些接口. Vector继承于AbstractList,实 ...
- 20145316《Java程序设计》第十周学习总结
学习内容总结 网络编程 1.网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 2.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴. 3.在发 ...
- 在VS2012中采用C++中调用DLL中的函数(4)
转自:http://www.cnblogs.com/woshitianma/p/3683495.html 这两天因为需要用到VS2012来生成一个DLL代码,但是之前并没有用过DLL相关的内容,从昨天 ...
- Python3.x:如何识别图片上的文字
Python3.x:如何识别图片上的文字 安装pytesseract库,必须先安装其依赖的PIL及tesseract-ocr,其中PIL为图像处理库,而后面的tesseract-ocr则为google ...
- Java学习第一周博客
20145307<Java程序设计>第一周学习总结 教材学习内容总结 首先学习安装Java有两种方法,一种是用Eclipse直接编辑输出,另一种方法是用记事本之后用win+G开启cmd运行 ...