浅谈Javascript中的事件气泡和事件捕获

1。事件冒泡

IE的事件流称为事件冒泡,即在事件开始时,它是最具体的元素,在文档最深的节点,然后蔓延到更具体的节点(文件)一步一步。采取以下HTML页面为例:





事件冒泡的例子


点击我




如果单击页面中的元素,单击事件将按以下顺序传播:

(1)

(2)

(3)

(4)文件

也就是说,Click事件首先发生的元素,这个元素是我们点击。然后,单击事件传播向上沿着DOM树和发生在每个级别的节点才传播到文档对象。图13-1显示事件冒泡的过程。


所有现代浏览器都支持事件冒泡,但仍有一些具体实现的差异。在IE5.5和早期版本的事件气泡跳过元素(从直接跳到文档)。IE9,Firefox,Chrome,Safari,总是泡沫事件窗口对象。

2。事件捕获

另一个事件流的Netscape Communicator团队提出称为事件捕捉(捕捉事件),事件捕捉的想法是不特定的节点应该收到一个事件之前,和最具体的节点应该最终接收事件。事件捕捉的目的是捕捉一个事件到达预定的目标之前。如果你仍然使用以前的HTML页面的演示活动实例,然后点击元素触发以下序列的单击事件。

(1)文件

(2)

(3)

(4)

在事件捕获过程中,文档对象首先接收单击事件,然后事件沿着DOM树向下传播到事件的实际目标,即元素。


虽然事件捕获是唯一的事件流模型由Netscape Communicator,IE9,Safari,Chrome支持,Opera和Firefox也支持这一事件流模型。

由于不支持旧版本的浏览器,很少有人使用事件来捕获它们。我们还建议读者在有特殊需要时确保使用事件冒泡和事件的使用。

以上是本文的全部内容,希望本文的内容能给大家的学习或工作带来一定的帮助,同时也希望能给予更多的支持!