event flow
JS之event flow
DOM事件流
1.定义：
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。
2.两种事件流：
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
捕获型事件流：事件的传播的英文从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
1 <模板>
2 <div id =“div1”style =“width：200px; height：200px;” V-上：click.capture = “迎接（ '1'，$事件）”>
3 <div id =“div2”style =“width：150px; height：150px;” V-上：click.capture = “迎接（ '2'，$事件）”>
4 <div id =“div3”style =“width：100px; height：100px;” V-上：click.capture = “迎接（ '3'，$事件）”> 3 </ DIV>
5 </ DIV>
6 </ DIV>
7 </模板>
8
9 <SCRIPT>
10 从“vue”导入Vue;
11 export default {
12 名字：'你好'，
13 data（）{
14 返回{
15 名称：'Vue.js'
16 }
17 }，
18 方法：{
19 greet：function（msg，e）{
20 执行console.log（味精）
21 }
22 }
23 }
24 </ SCRIPT>
25
26 <！ - 添加“scoped”属性以仅将CSS限制为此组件 - >
27 <style scoped>
28 DIV {
29 border：1px＃333 solid
30 }
31 </样式>
输出：
使用DOM事件流在DOM树中调度的事件的图形表示
事件对象被分派到事件目标。但是在发送开始之前，必须首先确定事件对象的传播路径。传播路径是的有序列表的当前事件的目标，通过该事件传递。该传播路径反映了文档的分层树结构。列表中的最后一项是事件目标，列表中的前面项目称为目标的祖先，前面的项目作为目标的父项。一旦确定了传播路径，事件对象就会经过一个或多个事件阶段。有三个事件阶段：捕获阶段，目标阶段和泡沫阶段。事件对象完成这些阶段，如下所述。如果不支持某个阶段，或者事件对象的传播已停止，则将跳过该阶段。例如，如果bubbles属性设置为false，则将跳过气泡阶段，如果stopPropagation()在分派之前调用，则将跳过所有阶段。
（1）捕获阶段：事件对象通过目标的祖先从传播窗口到目标的父，即事件从目标节点自上而下向Document节点传播的阶段。
（2）目标阶段：本次活动对象到达事件对象的事件的目标。如果事件类型指示事件未冒泡，则事件对象将在此阶段完成后暂停，即事件从目标节点自上而下向Document节点传播的阶段。
（3）冒泡阶段：事件对象通过目标的祖先中传播以相反的顺序，开始与目标的父和与所述结束窗口，即事件从目标节点自上而下向Document节点传播的阶段。
参数描述event必需。描述事件名称的字符串。
注意： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。
提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。function必需。描述了事件触发后执行的函数。
当事件触发时，事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。useCapture可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。
可能值：
- true - 事件句柄在捕获阶段执行
- false- 默认。事件句柄在冒泡阶段执行
DOCTYPE html>
2 <head>
3 <meta charset="UTF-8">
4 <title>DOM事件流</title>
5 </head>
6 <body>
7 <div id="div1">
8 <button id="btn">按钮</button>
9 </div>
10 <script>
11 var btn = document.getElementById("btn");
12 var div1 = document.getElementById("div1");
13
14 //事件目标
15 btn.onclick = function(){
16 console.debug("目标1.Click btn");
17 }
18 btn.addEventListener("click",function(){
19 console.debug("目标2.Click btn");
20 },true);
21
22 //事件冒泡
23 div1.onclick = function(){
24 console.debug("冒泡1.Click div1");
25 }
26 document.body.onclick = function(){
27 console.debug("冒泡2.Click Body");
28 }
29 document.onclick = function(){
30 console.debug("冒泡3.Click document");
31 }
32 window.onclick = function(){
33 console.debug("冒泡4.Click window");
34 }
35
36 //事件捕获
37 window.addEventListener("click",function(){
38 console.debug("捕获4.Click window");
39 },true);
40 document.addEventListener("click",function(){
41 console.debug("捕获3.Click document");
42 },true);
43 document.body.addEventListener("click",function(){
44 console.debug("捕获2.Click body");
45 },true);
46 div1.addEventListener("click",function(){
47 console.debug("捕获1.Click div1");
48 },true);
49
50 </script>
51 </body>
52 </html>
1 document.body.addEventListener("click",function(){
2 console.debug("捕获2.Click body");
3 },true);
addEventListener用于注册事件的处理器，当添加了第三个参数为true时，代表了在捕捉阶段接受后代元素的事件。
点击button按钮后，结果如下
1 event.html:38 捕获4.Click window
2 event.html:41 捕获3.Click document
3 event.html:44 捕获2.Click body
4 event.html:47 捕获1.Click div1
5 event.html:16 目标1.Click btn
6 event.html:19 目标2.Click btn
7 event.html:24 冒泡1.Click div1
8 event.html:27 冒泡2.Click Body
9 event.html:30 冒泡3.Click document
10 event.html:33 冒泡4.Click window
这个方法就是:stopPropagation() 对button的click事件做一些改造。
event flow的更多相关文章
- 关于 javascript event flow 的一个bug
[1]描述了firefox,safari 有一个bug和DOM 3 规范不一致:在event.currentTarget等于event.target的时候(即event flow处于target ph ...
- Javascript——浅谈 Event Flow
1.Javascript Events : Event Bubbling(事件冒泡) 如果事件从最特定的元素开始,则事件流中的一个阶段称为事件冒泡(DOM中可能最深的节点)然后向上流向最不特定的节点( ...
- javaScript高级教程(五) Event Flow
1.两个阶段三个模型:Netscape支持事件捕获,IE支持事件冒泡,w3c是先捕获后冒泡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S ...
- SAP事件 Event Flow(转载)
1 报表过程事件 报表过程事件是在报表运行过程中由系统自动控制,按照一定次序被触发的事件,其目的是从数据库中选择数据并整理,准备进行列表输出.这些事件从报表程序启动开始就被系统顺序触发,现分述如下: ...
- JS之event flow
DOM事件流 1.定义: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM ...
- DOM: EVENT FLOW
捕获阶段(capture phase) 捕获阶段的定义如下(w3c):The event object propagate through the target's ancestors from th ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- 关于js中return false、event.preventDefault()和event.stopPropagation()
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...
- What is event bubbling and capturing?
What is event bubbling and capturing? 答案1 Event bubbling and capturing are two ways of event propaga ...
随机推荐
- bzoj4665 小w的喜糖（dp+容斥）
4665: 小w的喜糖 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 222 Solved: 130[Submit][Status][Discuss ...
- Oracle rac 监听状态异常远程连接问题解决（TNS-12541 TNS-12560 TNS-00511 Linux Error：111 ORA-12502）
问题1现象 数据导出脚本执行失败,报错如下 ORA-12537 到服务器上查看,报错: [oracle@test ~]$ lsnrctl status LSNRCTL - Production on ...
- Bugku-CTF之Trim的日记本（不要一次就放弃）
Day19 Trim的日记本 http://123.206.87.240:9002/ hints:不要一次就放弃
- loj 6008 餐巾计划 - 费用流
题目传送门 传送门 题目大意 (经典题还不知道题意?) 容易想到需要把未使用的餐巾和已经使用的餐巾分开. 设$X_i$表示第$i$天已经的使用餐巾的点,设$Y_i$表示第$i$天还未使用的餐巾的点 我 ...
- VMware虚拟机扩展Ubuntu系统磁盘空间
1 首先给虚拟机扩容 虚拟机->设置->硬盘->实用程序->扩展磁盘容量 2 启动Ubuntu系统 2.1 打开终端安装gparted,sudo apt-get install ...
- Java笔试
异常 Throwable是Java错误处理的父类,有两个子类:Error和Exception. Error:无法预期的严重错误,导致JVM虚拟机无法继续执行,几乎无法恢复捕捉的 Exception:可 ...
- mysql5.7.21下载及安装步骤
以前都是用的5.6的数据库,现在想着换个新版本数据库.跟上时代的步伐,于是安装了一天才安装好.具体步骤如下: 1.官网下载mysql解压zip版,由于客户端安装版都是32位的,我的电脑是64位系统,所 ...
- Python中关于列表嵌套列表的处理
在处理列表的时候我们经常会遇到列表中嵌套列表的结构,如果我们要把所有元素放入一个新列表,或者要计算所有元素的个数的话应该怎么做呢? 第一个例子 对于上图中的这样一组数据,如果我们要知道这个CSV文件中 ...
- Unity外包团队：关于手机unity游戏开发的技术选型
技术选型 Unity引擎内置了多人联机的解决方案,涵盖了从最底层的网络数据传输,到不同玩家之间的消息发送,再到游戏大厅这样的高级功能.考虑到Unity官方提供的云服务(Internet Service ...
- d3.event=null
d3功能奇多, 已经模块化,(其实感觉和react差不多了). 所以默认打包的单个文件 <script src="https://d3js.org/d3.v5.min.js" ...