JavaScript事件流模型

事件流

捕获流

捕获流最早由网景公司开发的浏览器使用，在如下结构中

<div>
<button type='submit'></button>
</div>

div = document.querySelector('div');
div.onclick = function(event){
    alert('div');
};
button = document.querySelector('button');
button.onclick = function(event){
    alert('button');
}

倘若对button进行点击,在事件捕获模式下div和button都会弹出，而
且是先弹出div再弹出button，这是为什么呢？

在捕获模式的定义中，当事件发生时，该事件由高层次向低层次传递。

当你点击button时，同时也点击了div。而且是相当于先点击了div（高层次）又点击了button（低层次）。

冒泡流

冒泡流由微软公司最早使用，它是一种与上述捕获流截然相反的一种机制。

在冒泡流的定义中，当事件发生时，该事件由低层次向高层次传播（像是水泡向上冒出）。

同样是上面的例子，当点击button时，会先弹出button（低层次）再弹出div（高层次）。

DOM中的事件流

DOM2级综合了上述两个过程，将事件流分为两个过程三个阶段。

当事件发生时，事件由捕获过程->冒泡过程，即由捕获阶段->处于目标对象阶段->冒泡阶段组成。

这里的处于目标对象阶段就是上文中事件处于button阶段（对button做了真实点击）。

注意：处于目标对象阶段和冒泡阶段同属于冒泡过程。