event

事件流

事件流描述的是从页面中接受事件的顺序。
事件冒泡

IE的事件流叫做事件冒泡，即事件开始是由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。
如果点击了页面中的一个div元素，那么这个click事件可能会按照如下顺序传播：

    < div>
    < body>
    < html>
    document

也就是说，click事件首先在div元素上发生，然后click事件沿DOM树向上传播，在每一级节点上都会发生，直至传播至document对象。

 

这里写图片描述

所有现代浏览器都支持冒泡事件。
事件捕获

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

这时，单击div元素就会以下列顺序触发click事件：

    document
    < html>
    < body>
    < div>

事件捕获过程中，document对象首先接受click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标，即div元素。

 

这里写图片描述

虽然大多数浏览器都支持事件捕获，但很少有人使用。
DOM事件流

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

    首先发生的是事件捕获，为截获事件提供了机会。
    然后是实际的目标接收到事件。
    然后冒泡阶段发生，事件又传播回文档。

这里写图片描述

在DOM事件流中，实际的目标在捕获阶段不会接受到事件。这意味着在捕获阶段，事件从document到< html>再到< body>后就停止了。
下一个阶段是“处于目标”阶段，于是事件在div元素上发生，并在事件处理中被看成冒泡阶段的一部分。
来源：CSDN
原文：https://blog.csdn.net/crystal6918/article/details/52918710