DOM 中的事件流怎么理解

事件冒泡:


IE的事件流叫事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的某个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。说人话,就好比是你捕鱼吗?冒泡就是鱼在深处,喘了一口气,气泡一点点往上,最后传到你眼里,看见那个位置是有有鱼的,这个过程就是一个事件冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="myDiv">点击文本</div>
</body>
</html>

如果点击页面中的<div>元素,那么这个click事件会按照如下顺序传播:
    ①:text
    ②:<div>
    ③:<body>
    ④:<html>
    ⑤:document
    ⑥:IE9/Firefox/Chrome/Safari则一直冒泡到window对象

 

事件捕获:

Netscape 团队提出的另一种事件流叫事件捕获(event capturing)。事件捕获的用意是在于在事件到达预订目标之前捕获它。还是没听懂,还换成捕鱼吧,一把网撒下去,渔网不得一点点往水里沉吗?慢慢的人眼就看不见渔网了,渔网一直往下沉,最后把text(鱼)罩住,这个过程就是一个捕获。多钓鱼有益身心健康。呵呵。

DOM事件流:

&ldquo;DOM2级事件&rdquo;规定的事件流包括三个阶段:
    □:事件捕获阶段;
    □:处于目标阶段;
    □:冒泡阶段。
首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后是冒泡阶段,可以在这个阶段对事件做出相应。
多数支持DOM事件流的浏览器都实现了一种特定的行为;即使DOM2级事件规范明确要求捕获阶段不会涉及事件目标,但是IE9,Safari,Chrome,Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果就是:有两个机会在目标对象上操作事件。