js事件(Event)之（二）事件流模型

前續：本文來自於網絡文章整理，僅供參考，歡迎糾錯指正。

1、DOM同時支持兩種事件模型：捕獲型事件和冒泡型事件 （有些瀏覽器不支持捕獲 ）

eventPhase：調用事件處理的階段，1捕獲，2目標，3冒泡
捕獲階段是由上層元素到下層元素的順序依次。而冒泡階段則正相反。如下圖：

當事件觸發時body會先得到有事件發生的信息，然后依次往下傳遞，直到到達最詳細的元素。這就是事件捕獲階段。 
還記得事件注冊方法ele.addEventListener(type,handler,flag)吧，Flag是一個Boolean值，true表示事件捕捉階段執行，false表示事件冒泡階段執行。 
接着就是事件冒泡階段。從下往上 依次執行事件處理函數(當然前提是當前元素為該事件注冊了事件句柄)。
在這個過程中，可以阻止事件的冒泡，即停止向上的傳遞。 
阻止冒泡有時是很有必要的，實例如下：

<div>
    <input type="button" value="測試事件冒泡" />
</div>

2、冒泡部分：

var $input = document.getElementsByTagName("input")[0];
var $div = document.getElementsByTagName("div")[0];
var $body = document.getElementsByTagName("body")[0];
        
$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    alert("red");
}
$div.onclick = function(e){
    this.style.border = "5px solid green";
    alert("green");
}
$body.onclick = function(e){
    this.style.border = "5px solid yellow";
    alert("yellow");
}

//依次彈出”red“,"green","yellow"

你的本意是觸發button這個元素，卻連同父元素綁定的事件一同觸發。這就是事件冒泡。

如果對input的事件綁定改為：

$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    if (e && e.stopPropagation){
        e.stopPropagation();//阻止事件冒泡
    }else{
        e.cancelBubble=true;//IE
    }      
}

//這個時候只會彈出”red“，因為阻止了事件冒泡。

3、捕獲部分：

$input.addEventListener("click", function(){
    this.style.border = "5px solid red";
    alert("red");
}, true)
$div.addEventListener("click", function(){
    this.style.border = "5px solid green";
    alert("green");
}, true)
$body.addEventListener("click", function(){
    this.style.border = "5px solid yellow";
    alert("yellow");
}, true)
 
//這個時候依次彈出”yellow“,"green","red"。
 
//這就是事件的捕獲。
//如果把addEventListener方法的第三個參數改成false，則表示只在冒泡的階段觸發，彈出的依次為：”red“,"green","yellow"。