始于足下——理解事件流

  首先来讲讲事件流是什么。

  在javascript与html之间交流的时候,是通过事件来实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。浏览器在接受这些事件的时候,也是有一定的顺序的,至此,事件流的定义也就呼之欲出了:从页面中接受事件的顺序,称之为:事件流

  那么,页面的事件流到底是什么样的呢?他到底是怎么样的一个顺序呢?对此,IE和Netscape Communicator开发团队各持己见,首先,IE认为,事件流就是事件冒泡流(下面会讲到),而Netscape Communicator则认为,事件流是事件捕获流(下面会讲到)。

  首先讲一下IE的事件流,也就是事件冒泡。即事件开始是由最具体的一个元素接收,然后逐级向上传播到较为不具体的节点。简单来讲,就是从你所绑定事件的那个元素起,然后向外层传递,例如传到他的父元素,再传到父元素的父元素,以此类推,最后传播到document上,这个就是IE的事件流——事件冒泡。(自我感觉这东西就跟炸弹爆炸一样,由内向外的,嘿嘿~)

  其次为Netscape Communicator的事件流,也就是事件捕获。它的观点是最不太具体的节点应该最早接收到事件,而最具体的节点是最后接收到事件(感觉刚好跟IE相反,不愧是一个能与IE一教高下的浏览器);简单拿单击事件来讲,就是虽然你将事件绑定在了最里面的一个子元素上,但是在你单击这个元素的时候,浏览器捕获的顺序是 Document > html > 父元素····>你绑定事件的元素,这是一个由外到内的过程。但是由于老版本浏览器不支持这种事件流,因此现在很少有人使用事件捕获,建议大家放心的使用事件冒泡~

  最后讲一下DOM事件流,“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。简单来讲就是当事件发生时,首先经过捕获阶段,一层一层往下,到body后就停止了,然后进入下一个阶段,即“处于目标阶段”,这时候的事件就在目标元素上发生了,最后是事件冒泡阶段,即事件又向上传递回文档。

                                            (DOM事件流示意图)

  

  

  

猜你喜欢

转载自www.cnblogs.com/HxyH/p/11099821.html