宝哥软件园

在javascript中谈论事件气泡和事件捕获

编辑:宝哥软件园 来源:互联网 时间:2021-09-06

1.正在冒泡的事件

IE的事件流称为事件冒泡,即事件在开始时由最特定的元素(文档中嵌套层次最深的节点)接收,然后逐步传播到不太特定的节点(文档)。以下面的网页为例:

!Doctype htmlheadtitleevent冒泡示例/title/head dydiv id=' mydiv ' click me/div/body/html如果单击页面上的div元素,click事件将按以下顺序传播:

(1)分区

(2)身体

(3) html

(4)文件

也就是说,click事件首先发生在div元素上,这是我们单击的元素。然后,点击事件沿着DOM树向上传播,并在节点的每一层发生,直到它传播到文档对象。图13-1显示了事件冒泡的过程。

所有现代浏览器都支持事件冒泡,但是在实现上有一些不同。IE5.5及更早版本中的事件冒泡将跳过html元素(直接从正文跳到文档)。IE9、火狐、Chrome和Safari一路冒泡事件到窗口对象。

2.事件捕获

网景通信器团队提出的另一个事件流叫做事件捕获。事件捕获的思想是,不太特定的节点应该更早接收事件,而最特定的节点应该最后接收事件。事件捕获的目的是在事件到达预期目标之前捕获事件。如果前面的HTML页面仍然用作演示事件捕获的示例,单击div元素将按以下顺序触发click事件。

(1)文件

(2) html

(3)身体

(4)分区

在事件捕获过程中,文档对象首先接收click事件,然后事件依次向下进入DOM树,然后传播到事件的实际目标,即div元素。

虽然事件捕捉是网景Communicator唯一支持的事件流模型,但目前IE9、Safari、Chrome、Opera、Firefox都支持这种事件流模型。

因为旧浏览器不支持,所以很少有人使用事件捕捉。我们还建议读者满怀信心地使用事件冒泡,并在有特殊需求时使用事件捕获。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助,也希望多多支持我们!

更多资讯
游戏推荐
更多+