Javascript-事件的传播机制

<div id="outer">
    <div id="inner"></div>
</div>
document.body.onclick = function(){console.log('body');
}
outer.onclick = function(){console.log('outer');
}

inner.onclick = function(){console.log('inner');// inner  outer  body
}

事件传播有三个阶段（捕获 – 目标 – 冒泡）
Event.prototype
0: none 默认值，不代表任何的意思
1：capturing_phase: 捕获阶段
2：at_target: 目标阶段（当前事件源）
3：bubbling_phase: 冒泡阶段

三个阶段处理的事情
点击 inner，触发了 inner 的 click 事件
浏览器在执行 inner 的 click 绑定的方法之前
1. 从整个页面 document 开始向内查找，把 inner 的祖先元素遍历一遍（为冒泡阶段的传播途径做准备）
2. 接下来找到目标阶段找到当前事件源。把事件源上绑定的方法执行（没绑定方法就不执行了）
3. 不仅触发了当前事件源的点击行为，而且浏览器会按照第一个阶段规划的传播路径，从内向外（inner -> outer->body->html->document）把祖先元素的 click 行为依次触发。

当前元素的某个事件行为被触发，它所有的祖先元素，相关的事件行为也会被依次触发，顺序是从内向外。如果祖先元素的这个行为绑定了方法，绑定的方法也会被触发执行，我们把事件的这种传播机制叫做冒泡传播

这个传播机制是所有浏览器的传播机制。