什么是js的事件流、事件冒泡、事件捕获以及DOM事件流

理解事件流,我们先来理解“事件”。什么是事件?在javascript高级程序设计中,有这么一段话:

javaScript 与HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和CSS 代码)之间的松散耦合。

通俗一点的来说,事件就是“实现用户点击或者其他形式触发页面时,令页面做出对应改变”。

什么是事件流?

先来描述一个现象,在纸上画了很多个同心圆,当用手指指向圆心时,此时你指着的不是一个圆,而是很多个圆。就好像,你在页面上单击一个按钮,这个点击事件不仅仅只发生在按钮元素上,同时也发生在按钮的容器元素上,甚至整个页面上。
而事件流,描述的是从页面中接收事件的顺序。但IE 和Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流,而Netscape Communicator 的事件流是事件捕获流

事件冒泡

IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)




    Event Bubbling Example


    
Click Me

如果你单击了页面中的

元素,那么这个click 事件会按照如下顺序传播:

(1) 
(2) (3) (4) document

也就是说,click 事件首先在

元素上发生,而这个元素就是我们单击的元素。然后,click事件沿DOM树向上传播,在每一级节点上都会发生,直至传播到document 对象。

什么是js的事件流、事件冒泡、事件捕获以及DOM事件流_第1张图片

所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。

事件捕获

Netscape Communicator 团队提出的另一种事件流叫做事件捕获(event capturing)。事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。




    Event Bubbling Example


    
Click Me

如果你单击了页面中的

元素,那么这个click 事件会按照如下顺序传播:

(1) document
(2) 
(3) 
(4) 

在事件捕获过程中,document 对象首先接收到click 事件,然后事件沿DOM 树依次向下,一直传播到事件的实际目标,即

元素。

什么是js的事件流、事件冒泡、事件捕获以及DOM事件流_第2张图片

虽然事件捕获是Netscape Communicator 唯一支持的事件流模型,但IE9、Safari、Chrome、Opera和Firefox 目前也都支持这种事件流模型。尽管“DOM2 级事件”规范要求事件应该从document 对象开始传播,但这些浏览器都是从window 对象开始捕获事件的。由于老版本的浏览器不支持,因此很少有人使用事件捕获。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。




    Event Bubbling Example


    
Click Me

如果你单击了页面中的

元素,那么这个click 事件会按照如下顺序传播:

什么是js的事件流、事件冒泡、事件捕获以及DOM事件流_第3张图片

在DOM 事件流中,实际的目标(

元素)在捕获阶段不会接收到事件。这意味着在捕获阶段,事件从document 到再到后就停止了。下一个阶段是“处于目标”阶段,于是事件在
上发生,并在事件处理(后面将会讨论这个概念)中被看成冒泡阶段的一部分。然后,冒泡阶段发生,事件又传播回文档。

IE9、Opera、Firefox、Chrome 和Safari 都支持DOM 事件流;IE8 及更早版本不支持DOM 事件流。

 

你可能感兴趣的:(javascript)