码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-01 01:09:43      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:html   color   net   dom2   事件冒泡   响应   目标   事件流   拦截事件   

事件流是用来描述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事件流)

标签:html   color   net   dom2   事件冒泡   响应   目标   事件流   拦截事件   

原文地址:https://www.cnblogs.com/Syinho/p/12247275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!