今天学习了 DOM 事件流三阶段

起了个小学生式标题。

这东西又是浏览器历史的一桩恩怨……当最初的 HTML 标记式的语言结构逐步成形后，人们开始对网页内的互动有了要求。当然，这事本来并不难，所有的用户互动归根结底就是『触发事件 – 判断当前状态 – 执行相应命令』的逻辑，而 HTML 本身就已经通过开标签和闭标签组对的形式，很好地形成了后来被称之为『DOM 元素』的数据结构，理论上只要把触发事件分别加到一个个的元素上，或者按需加到某些特定的元素上，就可以执行命令了。

然后问题就来了。

由于 HTML 的表现是盒式结构，都是一些大框框包含小框框的情况。比如如下代码：

<div id="blue">
	<div id="green">
		<div id="red">
            sometext
		</div>
	</div>
</div>

形成的 DOM 盒式包含结构大约就是这样：

当用户点击红块时，实际上浏览器是无法判断这次点击的意图的，也就是说，到底应该是点在红块上，红块对这次点击作出反应，还是点在绿块上，亦或是蓝块上。即使是三者都算作被点到了，三者都有反应，那怎么也得有个先后顺序吧。

有两种顺序都可以，一种是先子后父，先里后外，红绿蓝顺序；第二种是先父后子，先外后里，蓝绿红顺序。

两者都可以，两者都有理，然后老 IE 用的是前者，老 Netscape 用的是后者……结的梁子够多了，也不差这一个了。

于是新的协议为了兼容，提出了 DOM 事件流的三个阶段的设计，即……首先，都别争了，顺序就按『蓝绿红绿蓝』这么来吧……然后，这一顺序又分成三个阶段，第一阶段我称之为『下沉』，顺序为蓝绿；第二阶段『触底』，系统发现红色已经是最底层 DOM 元素了，第三阶段『上浮』，顺序变成了红绿蓝。

这三个阶段是有标准的命名的，分别是『捕获阶段』、『目标阶段』、『冒泡阶段』。并且严格来说，捕获阶段不包括最底层元素，而冒泡阶段包括目标阶段。盗图一张：

尽管规范上来说，要求捕获阶段只注册事件，而在冒泡阶段执行相应阶段。但事实上各浏览器在实现时，都允许在捕获阶段也执行相应的事件。结果就是，对于一个目标，有两次执行事件的机会。这在为 DOM 元素添加事件的 JS 函数里就写得很明白：

addEventListener(type, listener, useCapture)

其中第三参数就是决定这个事件是否在捕获阶段就开始执行的。

当我们使用 jQuery 等第三方库时，这一特性被 jQuery 很好地隐藏封装起来了，并良好地处理了各浏览器不一致的特性，使得我们可以通过 .click() 函数方便地添加点击事件，并不用考虑三个阶段的问题。