JS之event flow
DOM事件流
1.定义：
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。
2.两种事件流：
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
捕获型事件流：事件的传播的英文从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
<模板>
<div id =“div1”style =“width：200px; height：200px;” V-上：click.capture = “迎接（ '1'，$事件）”>
<div id =“div2”style =“width：150px; height：150px;” V-上：click.capture = “迎接（ '2'，$事件）”>
<div id =“div3”style =“width：100px; height：100px;” V-上：click.capture = “迎接（ '3'，$事件）”> 3 </ DIV>
</ DIV>
</ DIV>
</模板> <SCRIPT>
从“vue”导入Vue;
export default {
名字：'你好'，
data（）{
返回{
名称：'Vue.js'
}
}，
方法：{
greet：function（msg，e）{
执行console.log（味精）
}
}
}
</ SCRIPT> <！ - 添加“scoped”属性以仅将CSS限制为此组件 - >
<style scoped>
DIV {
border：1px＃333 solid
}
</样式>
输出：
3.process
事件如何通过DOM树传播。应用程序可以使用该dispatchEvent()方法调度事件对象，并且事件对象将通过DOM事件流确定的DOM树传播。
使用DOM事件流在DOM树中调度的事件的图形表示
事件对象被分派到事件目标。但是在发送开始之前，必须首先确定事件对象的传播路径。传播路径是的有序列表的当前事件的目标，通过该事件传递。该传播路径反映了文档的分层树结构。列表中的最后一项是事件目标，列表中的前面项目称为目标的祖先，前面的项目作为目标的父项。一旦确定了传播路径，事件对象就会经过一个或多个事件阶段。有三个事件阶段：捕获阶段，目标阶段和泡沫阶段。事件对象完成这些阶段，如下所述。如果不支持某个阶段，或者事件对象的传播已停止，则将跳过该阶段。例如，如果bubbles属性设置为false，则将跳过气泡阶段，如果stopPropagation()在分派之前调用，则将跳过所有阶段。
（1）捕获阶段：事件对象通过目标的祖先从传播窗口到目标的父，即事件从目标节点自上而下向Document节点传播的阶段。
（2）目标阶段：本次活动对象到达事件对象的事件的目标。如果事件类型指示事件未冒泡，则事件对象将在此阶段完成后暂停，即事件从目标节点自上而下向Document节点传播的阶段。
（3）冒泡阶段：事件对象通过目标的祖先中传播以相反的顺序，开始与目标的父和与所述结束窗口，即事件从目标节点自上而下向Document节点传播的阶段。
4.method：
语法：
element.addEventListener(event, function, useCapture)
| 参数 | 描述 |
|---|---|
| event | 必需。描述事件名称的字符串。
注意： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必需。描述了事件触发后执行的函数。
当事件触发时，事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。
可能值：
|
5.applicants：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>DOM事件流</title>
</head>
<body>
<div id="div1">
<button id="btn">按钮</button>
</div>
<script>
var btn = document.getElementById("btn");
var div1 = document.getElementById("div1"); //事件目标
btn.onclick = function(){
console.debug("目标1.Click btn");
}
btn.addEventListener("click",function(){
console.debug("目标2.Click btn");
},true); //事件冒泡
div1.onclick = function(){
console.debug("冒泡1.Click div1");
}
document.body.onclick = function(){
console.debug("冒泡2.Click Body");
}
document.onclick = function(){
console.debug("冒泡3.Click document");
}
window.onclick = function(){
console.debug("冒泡4.Click window");
} //事件捕获
window.addEventListener("click",function(){
console.debug("捕获4.Click window");
},true);
document.addEventListener("click",function(){
console.debug("捕获3.Click document");
},true);
document.body.addEventListener("click",function(){
console.debug("捕获2.Click body");
},true);
div1.addEventListener("click",function(){
console.debug("捕获1.Click div1");
},true); </script>
</body>
</html>
document.body.addEventListener("click",function(){
console.debug("捕获2.Click body");
},true);
addEventListener用于注册事件的处理器，当添加了第三个参数为true时，代表了在捕捉阶段接受后代元素的事件。
点击button按钮后，结果如下
event.html:38 捕获4.Click window
event.html:41 捕获3.Click document
event.html:44 捕获2.Click body
event.html:47 捕获1.Click div1
event.html:16 目标1.Click btn
event.html:19 目标2.Click btn
event.html:24 冒泡1.Click div1
event.html:27 冒泡2.Click Body
event.html:30 冒泡3.Click document
event.html:33 冒泡4.Click window
由此可见DOM事件流的顺序是
1.捕获
window
document
body
div1
2.目标 （目标的顺序与事件定义的先后顺序有关）
目标一
目标二
3.冒泡
div1
body
document
window
应用场景
以上面的例子为例，想要触发在button上的事件，但是不想触发在div和其上元素的事件时，弄清事件流就相当重要。比如：阻止事件冒泡过程，防止事件冒泡而带来不必要的错误和困扰。 这个方法就是:stopPropagation() 对button的click事件做一些改造。
JS之event flow的更多相关文章
- event flow
JS之event flow DOM事件流 1.定义: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事 ...
- 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 ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- 浅析Node.js的Event Loop
目录 浅析Node.js的Event Loop 引出问题 Node.js的基本架构 Libuv Event Loop Event Loop Phases Overview Poll Phase The ...
- 定时器setTimeout()和Node.js的Event Loop
一.定时器 setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行.它在"任务队列"的尾部添加一个事件,因此要等到同步任务和 ...
- javaScript高级教程(五) Event Flow
1.两个阶段三个模型:Netscape支持事件捕获,IE支持事件冒泡,w3c是先捕获后冒泡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S ...
- js & input event & input change event
js & input event & input change event vue & search & input change <input @click=& ...
- js中event的target和currentTarget
js 中的event是个很有用的对象,不同的浏览器,处理方式可能不一样. 我们现在只考虑标准的浏览器的情况 event是表示时间触发的产生的对象,以click事件为例. 由于冒泡的存在,event对象 ...
随机推荐
- The All-purpose Zero (最长公共子序列)
题意:求最长公共子序列,但是有个辅助条件,那就是如果那个值为0,那么他可以更换为任意值. 思路:假设现在只剩下没有0的序列是不是就很好求了?那么我们的想法就是看有没有办法将0往最左端或者最有端移动,显 ...
- Internet spirit
互联网思维精髓总结为 :1.用户思维:2.简约思维:3.极致思维:4.迭代思维:5.流量思维:6.社会化思维:7.大数据思维:8.平台思维:9.跨界思维.
- 像素与DPI之间的关系
先说像素.像素是电子图像组成的基本单位,将图像放大数倍,会发现图像是由一个个“小色块”紧密排列组成的,每一个“小色块”就是一个像素点. 也就是说,每个图像都是由n多个像素点组成. 再说分辨率.所谓分辨 ...
- 使用shiro框架，注销问题的解决
在使用shiro框架的时候,有时候会因为登录问题找不到注销的controller.所以会报404的错误,下面是解决办法: 1.首先写一个类SystemLogoutFilter继承LogoutFilte ...
- nginx-负载均衡相关配置 第五章
一.负载均衡: 通过反向代理客户端的请求到一个服务器群组,通过某种算法,将客户端的请求按照自定义的有规律的一种调度调度给后端服务器. Nginx的负载均衡使用upstream定义服务器组,后面跟着组名 ...
- [c/c++] programming之路（17）、高级指针
一.二级指针 二级指针的作用:1.函数改变外部变量指针2.外挂改变一个指针的值 #include<stdio.h> #include<stdlib.h> void main() ...
- 安装GDB-ImageWatch ，在QT中查看图像
GDB_ImageWatch是在Linux下基于QT编写图像处理程序的调试程序. 由于并非像ImageWatch一样由官方提供,而是在github上以代码的方式进行提供,我们在使用的时候需要自己编译, ...
- 浅析vue实例的生命周期（生命周期钩子）
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- version control的简单认知
version control 版本控制是一种记录文件或文件集随时间变化的系统,以便您以后可以调用特定版本.对于本书中的示例,您将使用软件源代码作为受版本控制的文件,但实际上您可以使用计算机上的几乎任 ...
- 百度AI搜索引擎
一.爬虫协议 与其它爬虫不同,全站爬虫意图爬取网站所有页面,由于爬虫对网页的爬取速度比人工浏览快几百倍,对网站服务器来说压力山大,很容易造成网站崩溃. 为了避免双输的场面,大家约定,如果网站建设者不愿 ...