Event事件的三个阶段

Posted 2020-08-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Event事件的三个阶段相关的知识，希望对你有一定的参考价值。

转自www.w3school.com.cn/htmldom/event_bubbles.asp

在 2 级 DOM标准中，事件传播分为三个阶段:

第一，捕获阶段。事件从 Document 对象沿着文档树向下一级一级传递给目标节点。如果目标的任何一个先辈注册了捕获事件句柄比如document.onkeydown=myonkeydown，那么在事件传播过程中马上运行这些句柄，而不等到传播到目标才执行。

第二个阶段发生在目标节点自身。直接注册在目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相。

第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

事件传播的当前阶段。它的是下面的三个常量之一，它们分别表示捕获阶段、在目标对象上时和起泡阶段

1 CAPTURING_PHASE,

2 AT_TARGET,

3 BUBBLING_PHASE

下面是一个例子:"事件气泡秀"Bubble event show

 1 <html>
 3 <head>
 5 <script type="text/javascript">
 6 
 9 function foo1(){alert("foo1");}
10 
11 function foo2(){alert("foo2");}
12 
13 function foo3(){alert("foo3");}
14 
15 function foo4(){alert("foo4");}
16 
17 </script>
18 
19 </head>
20 
21  
22 
23 <body onclick="foo1()">
24 
25 <p onclick="foo2()">
26 
27 <em onclick="foo3()">
28 
29 <input type="text" onclick="foo4()">
30 
31 bubble event show
32 
33 </input>
34 
35 </em>
36 
37 </p>
38 
39 </body>
40 
41 </html>

以上是关于Event事件的三个阶段的主要内容，如果未能解决你的问题，请参考以下文章