js事件捕获与冒泡机制的探索

        Javascript的事件处理主要分为3个阶段，事件的捕获，目标阶段，事件的冒泡。如何透彻的领悟到其中的过程呢？

       先了解一下整体的过程：当用户点击某一个元素以后，浏览器会拿到事件的具体信息，包括在点击的位置，事件的类型等信息。然后浏览器会根据这些信息去去遍历一次dom节点，去查看是否有与本次事件相关的绑定函数，再根据事件实在捕获的时候触发还是在冒泡的时候触发将处理函数添加到任务队列。

        注意：目标元素本身是不会处在事件捕获阶段的。

        浏览器事件机制详细展示了时间处理的整个流程，从document开始进行事件的捕获，一直捕获到目标元素的父元素，捕获过程就结束了，然后开始是目标阶段。目标阶段会执行目标元素绑定的事件，但实际中，目标元素的事件处理是在冒泡阶段进行的。接下来就是冒泡阶段，事件又会传播回到文档。

下图的测试就能说明整个事件处理机制。三个元素，爷爷、爸爸和皇上，绑定了两个事件，分别在事件的捕获和冒泡阶段执行(addEventListener的第三个参数为true时代表在事件的捕获阶段执行绑定的函数)。按照绑定的方式，应该依次输出‘我是爷爷, 捕获‘>’我是爸爸,捕获‘>’我是皇上,捕获‘>’我是皇上’> ‘我是爸爸‘>’我是爷爷‘；但是实际的输出中，‘我是皇上’在’我是皇上,捕获’之前输出了，说明目标元素上注册捕获阶段执行的函数不是在捕获阶段执行的，而是在冒泡阶段按照事件的绑定顺序依次执行的。