事件流(事件冒泡事件捕获和DOM事件流)

Posted syinho

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件流(事件冒泡事件捕获和DOM事件流)相关的知识,希望对你有一定的参考价值。

事件流是用来描述html页面中接收事件的顺序的。

IE给出的顺序叫做事件冒泡。

Netscape给出的顺序叫做事件捕获。

<!Doctype>
<html>
    <body>
        <div id="btn">Click me</div>
    </body>
</html>        

事件冒泡正如其名,向鱼类吐泡泡一样。当点击上面div时,最先接收到click事件的是div元素本身。因为它是文本中当前所交互的元素里嵌套最深的那个元素。随后沿着DOM树一路往上到body,到html,到document为止。

事件捕获中最先获取交互事件的时document,再然后是沿着DOM树一直往下直到作为目标的所交互元素。

所有现代浏览器都支持事件冒泡。

 

DOM2级事件规定了事件流的三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

三个阶段的作用分别是:提供拦截事件的机会,实际的目标接收到事件,对事件做出响应。

在事件捕获阶段中,事件本身不会接触到目标元素。但是在事件处理过程中,处于目标阶段会被视为冒泡阶段的一部分。另外DOM2明确规定“捕获阶段不会接触到事件目标”,然而浏览器厂商们并没有理会。也因此在事件捕获阶段以及事件冒泡阶段都有机会在事件目标上进行事件处理。

 

以上是关于事件流(事件冒泡事件捕获和DOM事件流)的主要内容,如果未能解决你的问题,请参考以下文章

事件高级 DOM事件流 捕获阶段/冒泡阶段

Dom事件流冒泡捕获

事件流事件冒泡和事件捕获

ie和dom事件流的区别

JavaScript事件捕获冒泡与捕获

事件流 事件冒泡和事件捕获