事件流描述的是从页面中接受事件的顺序，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。
冒泡：事件开始的目标元素接收，然后逐级向上传播到不具体的点（中间冒泡事件可以停止），即由目标元素及具体的元素（如：span,button,li等）向最外层元素(如body, window)传播。顺序为内层元素到外层元素（botton -> div -> window）（所有的浏览器都支持）
捕获：不具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件。顺序和冒泡相反。
addEventListener(事件，处理函数，false)；【冒泡，默认】
addEventListener(事件，处理函数，true)； 【捕获】
列：冒泡（部分代码）
<body id="first" onclick="bodyClick()">
<div id="second" onclick="divClick()">
<button id="third" onclick="btn()">
<p id="button" onclick="p()">点击冒泡</p>
</button>
</div>
</body>
function p(){
<script>
function p(){
console.log('p标签被点击')
}
function btn(){
console.log("button被点击")
}
function divClick(event){
console.log('div被点击');
}
function bodyClick(){
console.log('body被点击')
}
</script>
或
document.getElementById("button").addEventListener("click",function(){
alert("button");
},false);
document.getElementById("third").addEventListener("click",function(){
alert("third");
},false);
document.getElementById("second").addEventListener("click",function(){
alert("second");
},false);
document.getElementById("first").addEventListener("click",function(){
alert("first");
},false);
列：捕获（部分代码）
<div id="second" onclick="divClick()">
<button id="third" onclick="btn()">
<p id="button" onclick="p()">点击冒泡</p>
</button>
</div>
</body>
document.getElementById("button").addEventListener("click",function(){
alert("button");
},true);
document.getElementById("third").addEventListener("click",function(){
alert("third");
},true);
document.getElementById("second").addEventListener("click",function(){
alert("second");
},true);
document.getElementById("first").addEventListener("click",function(){
alert("first");
},true);
DOM2级事件规定的时间流包括 三个阶段：
事件捕获阶段
处于目标阶段
事件冒泡阶段
注意：在DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，最后进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。
补充：
事件阻止：stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段。
document.getElementById("button").addEventListener("click",function(event){
alert("button");
event.stopPropagation();
},false);
preventDefault() ： 通知浏览器不要执行与事件关联的默认动作。
