用伪代码理解浏览器中的事件冒泡以及捕获

写在前面的

开撸代码

首先，当页面渲染好之后，我们的页面是一个dom树



浏览器会获取到每一个节点的位置和宽度、高度。

好了，从这个时候开始，浏览器就会运行自己的事件循环，查看是否有各种事件发生

于是，这个时候，用户点击了一下页面上的某一块位置，但是浏览器并不知道用户点

击了哪一个dom，并且也不知道该dom是否有事件响应程序，浏览器知道的只是用户点

击的位置的x,y坐标，浏览器这个时候就开始从dom树的根开始寻找，（这里是捕获的

开始），x,y是否在根的位置上，根有没有注册点击事件？点击事件是否是捕获注册的

？如果事件是捕获注册的，那么执行这个事件处理函数，在该函数中，判断是否有

event.stopPropagation()来阻止事件的捕获，若阻止了，那么该点击事件的整个过程就完

成了，不论子节点是否注册了点击事件都不会执行到的。然后接着往后找，进行同样的

判断，知道找到叶子节点位置（这里是捕获的结束）。同样要判断该叶子节点是否注册

了点击事件？是否阻止了事件？然后怎么来的，就怎么回去（这里是冒泡的开始）。在回

去的过程中，判断每个节点是否注册了点击事件，是否是冒泡注册的，如果是冒泡注册的

事件，那么就执行，执行过程中如果发生了event.stopPropagation()，那么整个点击事件

就结束了，如果没有就接着往根走，直至结束。

以下是伪代码

while (true) {
...
if (eventHappen) {
var x = event.x;
var y = event.y;
var dom = body;
var Buhuoing = true;
while (dom !== html ) {
if (dom.hasEventHandler && ((dom.isBuhuo && Buhuoing) || (dom.isMaoPao && !Buhuoing)) ) {
dom.EventHandler();
if (preventEvent) {
break;
}
}
if (dom == '叶子节点') {
Buhuoing = false;
}
if (Buhuoing) {
dom = dom.nextDom();
} else {
dom = dom.prevDom();
}
}
}
...
}