今天主要介绍上我们使用的浏览器的事件流。
DOM2级事件规定的事件流包括三个阶段:

- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
事件捕获阶段(Event Capturing)
事件捕获的用意是在于事件到达预定目标之前捕获它。因此,事件捕获的过程是让不太具体的节点先更早接收到事件,而最具体的节点应该最后接收到事件。

如上图所示,按照事件捕获的思想,在此过程(click页面某个元素)中,document对象会首先接收到click事件,然后事件沿着dom树依次向下,一直传播到实际目标,即div元素。但是在事件流中的捕获阶段,实际目标div元素是不会接收到事件的,这就意味着没在捕获阶段,事件从document到再到后就停止了。(但是IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件)
下一个阶段是“处于目标”阶段,于是事件在
发生,并在事件处理中被堪称冒泡阶段的一部分。最后,冒泡事件发生,事件又传播回文档。
冒泡阶段(Event Bubbling)
事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点,即document对象。

DOM2 与 DOM0区别
DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:
addEventListener()
removeEventListener()
所有的DOM节点都包含这两个方法,而且接受三个参数:
第三个参数默认为false,代表在冒泡阶段执行。设为true则在捕获阶段执行
网友评论