JS之event flow

DOM事件流

1.定义：

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。

2.两种事件流：

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

捕获型事件流：事件的传播的英文从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

  1.  1 <模板>
  2.  2   <div id =“div1”style =“width：200px; height：200px;” V-上：click.capture = “迎接（ '1'，$事件）”>
  3.  3     <div id =“div2”style =“width：150px; height：150px;” V-上：click.capture = “迎接（ '2'，$事件）”>
  4.  4       <div id =“div3”style =“width：100px; height：100px;” V-上：click.capture = “迎接（ '3'，$事件）”> 3 </ DIV>
  5.  5     </ DIV>
  6.  6   </ DIV>
  7.  7 </模板>
  8.  8
  9.  9 <SCRIPT>
  10. 10   从“vue”导入Vue;
  11. 11   export default {
  12. 12     名字：'你好'，
  13. 13     data（）{
  14. 14       返回{
  15. 15         名称：'Vue.js'
  16. 16       }
  17. 17     }，
  18. 18     方法：{
  19. 19       greet：function（msg，e）{
  20. 20         执行console.log（味精）
  21. 21       }
  22. 22     }
  23. 23   }
  24. 24 </ SCRIPT>
  25. 25
  26. 26 <！ - 添加“scoped”属性以仅将CSS限制为此组件 - >
  27. 27 <style scoped>
  28. 28   DIV {
  29. 29     border：1px＃333 solid
  30. 30   }
  31. 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. 1 document.body.addEventListener("click",function(){
  2. 2         console.debug("捕获2.Click body");
  3. 3     },true);

addEventListener用于注册事件的处理器，当添加了第三个参数为true时，代表了在捕捉阶段接受后代元素的事件。

点击button按钮后，结果如下

  1.  1 event.html:38 捕获4.Click window
  2.  2 event.html:41 捕获3.Click document
  3.  3 event.html:44 捕获2.Click body
  4.  4 event.html:47 捕获1.Click div1
  5.  5 event.html:16 目标1.Click btn
  6.  6 event.html:19 目标2.Click btn
  7.  7 event.html:24 冒泡1.Click div1
  8.  8 event.html:27 冒泡2.Click Body
  9.  9 event.html:30 冒泡3.Click document
  10. 10 event.html:33 冒泡4.Click window

这个方法就是:stopPropagation() 对button的click事件做一些改造。

event flow的更多相关文章

  1. 关于 javascript event flow 的一个bug

    [1]描述了firefox,safari 有一个bug和DOM 3 规范不一致:在event.currentTarget等于event.target的时候(即event flow处于target ph ...

  2. Javascript——浅谈 Event Flow

    1.Javascript Events : Event Bubbling(事件冒泡) 如果事件从最特定的元素开始,则事件流中的一个阶段称为事件冒泡(DOM中可能最深的节点)然后向上流向最不特定的节点( ...

  3. javaScript高级教程(五) Event Flow

    1.两个阶段三个模型:Netscape支持事件捕获,IE支持事件冒泡,w3c是先捕获后冒泡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S ...

  4. SAP事件 Event Flow(转载)

    1 报表过程事件 报表过程事件是在报表运行过程中由系统自动控制,按照一定次序被触发的事件,其目的是从数据库中选择数据并整理,准备进行列表输出.这些事件从报表程序启动开始就被系统顺序触发,现分述如下: ...

  5. JS之event flow

    DOM事件流 1.定义: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM ...

  6. DOM: EVENT FLOW

    捕获阶段(capture phase) 捕获阶段的定义如下(w3c):The event object propagate through the target's ancestors from th ...

  7. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  8. 关于js中return false、event.preventDefault()和event.stopPropagation()

    在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...

  9. What is event bubbling and capturing?

    What is event bubbling and capturing? 答案1 Event bubbling and capturing are two ways of event propaga ...

随机推荐

  1. Type Conversion

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本文原更新于作者的github博客,这里给出链接. 什么是转换 转换是接受一个类型的值并使用它作为另一个类型的等价值的过程.转换 ...

  2. 高级shell 脚本

    1.函数 函数是一个脚本代码块,你可以为其命名并在代码中任何位置重用.要在脚本中使用该代码块时,只要使用所起的函数名就行了(这个过程称为调用函数).本节将会介绍如何在shell脚本中创建和使用函数 创 ...

  3. 换个角度聊聊FaaS

    Serverless/FaaS伴随着k8s的热度增加,也成为了热门话题.相关文章介绍了很多,这里笔者不一一赘述,而是从个人见解上聊聊关于FaaS的架构和意义. FaaS可能的架构优化 从AppEngi ...

  4. CEF JS实现获取剪贴板图片的DataURL

    转载:https://www.deanhan.cn/js-paste-upload.html 转载:https://segmentfault.com/a/1190000002915597 转载:htt ...

  5. pip安装scrapy失败：twisted安装失败 error: Microsoft Visual C++ 14.0 is required.. 解决方法

    在使用pip install scrapy命令安装scrapy框架时,Twisted出现安装错误.如下: building 'twisted.test.raiser' extension error: ...

  6. 7-27 Codeforces Round #499 (Div. 2)

    C. Fly 链接:http://codeforces.com/group/1EzrFFyOc0/contest/1011/problem/C 题型:binary search .math. 题意:总 ...

  7. python学习之——习题二

    习题二:求1-100的所有数的和 首先明确,1-100的数字相加一直是前面加后面,如,1+2+3+4......我们平常的计算方法是1+2等于3,然后再使用3+3等于6,然后6+4等于10以此类推加到 ...

  8. 【我的前端自学之路】【HTML5】Web Socket

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508118.html 什么是Web Socket WebSocket ...

  9. 最大子段和的DP算法设计及其效率测试

    表情包形象取自番剧<猫咪日常> 那我也整一个 曾几何时,笔者是个对算法这个概念漠不关心的人,由衷地感觉它就是一种和奥数一样华而不实的存在,即便不使用任何算法的思想我一样能写出能跑的程序 直 ...

  10. 面试被问之-----sql优化中in与exists的区别

    曾经一次去面试,被问及in与exists的区别,记得当时是这么回答的:''in后面接子查询或者(xx,xx,xx,,,),exists后面需要一个true或者false的结果",当然这么说也 ...