<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行动顺次触发。

当前元素的某个事宜行动被触发，它一切的先人元素，相干的事宜行动也会被顺次触发，递次是从内向外。假如先人元素的这个行动绑定了要领，绑定的要领也会被触发实行，我们把事宜的这类流传机制叫做冒泡流传

这个流传机制是一切浏览器的流传机制。