JavaScript的事件監聽、捕獲和冒泡

　　在前端開發中，我們經常需要對某些事件進行監聽。這樣只要在指定的元素上觸發了該事件，就會執行一個回調函數來進行相關的操作。

　　而JavaScript中事件監聽的方法總共有三種，分別如下：

• element.addEventListener(type, listener[, useCapture]);　　//IE6~8不支持
• element.attachEvent('on' + type, listener)     //支持IE6~10，IE11不支持
• element['on' + type] = function(){}     //支持所有瀏覽器

　　demo：

function cb(){
  console.log(1);  
}

element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

 

　　參數解釋：
　　type：事件類型
　　listener：事件出發后的回調函數
　　useCapture：是否使用捕獲，如果值為true，useCapture表示用戶希望發起捕獲。在發起捕獲之后，只要DOM子樹下發生了該事件類型，都會先被該事件監聽器捕獲，然后再被派發到DOM子樹中的事件監聽器中。並且向上冒泡的事件不會觸發那些發起捕獲的事件監聽器。useCapture默認值是true。

　　addEventListener是W3C工作組在DOM Level 2開始引入的一個注冊事件監聽器的方法，而在此之前，傳統的事件監聽方法是通過element['on' + type]的方式來注冊的。它們的主要區別是element['on' + type]的方式無法使用事件捕獲，並且element['on' + type]不支持對同一個元素的同一個事件注冊多個事件監聽器。如下面的例子所示，元素被點擊之后只會輸出1，而不會輸出0和1。

element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }

 　　然而addEventListener方法在IE6~8的瀏覽器中不被支持。那么在低版本的IE中怎么來為同一個事件注冊多個事件監聽器呢？原來IE從IE5.0系列開始就引入了attachEvent()方法來支持這一特性。但遺憾的是該方法也不支持事件捕獲。並且從IE11開始，這個方法已經被棄用。

　　談談事件的捕獲與冒泡

　　

　　W3C規范中定義了3個事件階段，依次是捕獲階段、目標階段、冒泡階段。事件對象按照上圖的傳播路徑依次完成這些階段。如果某個階段不支持或事件對象的傳播被終止，那么該階段就會被跳過。舉個例子，如果Event.bubbles屬性被設置為false，那么冒泡階段就會被跳過。如果Event.stopPropagation()在事件派發前被調用，那么所有的階段都會被跳過。

• 捕獲 階段：在事件對象到達事件目標之前，事件對象必須從window經過目標的祖先節點傳播到事件目標。 這個階段被我們稱之為捕獲階段。在這個階段注冊的事件監聽器在事件到達其目標前必須先處理事件。
• 目標 階段：事件對象到達其事件目標。 這個階段被我們稱為目標階段。一旦事件對象到達事件目標，該階段的事件監聽器就要對它進行處理。如果一個事件對象類型被標志為不能冒泡。那么對應的事件對象在到達此階段時就會終止傳播。
• 冒泡 階段：事件對象以一個與捕獲階段相反的方向從事件目標傳播經過其祖先節點傳播到window。這個階段被稱之為冒泡階段。在此階段注冊的事件監聽器會對相應的冒泡事件進行處理。

　　在一個事件完成了所有階段的傳播路徑后，它的Event.currentTarget會被設置為null並且Event.eventPhase會被設為0。Event的所有其他屬性都不會改變（包括指向事件目標的Event.target屬性）

 

　　知識鏈接：

　　1、Event.currentTarget屬性：currentTarget 事件屬性返回其監聽器觸發事件的節點，即當前處理該事件的元素、文檔或窗口。在捕獲和起泡階段，該屬性是非常有用的，因為在這兩個節點，它不同於 target 屬性。

/*HTML代碼*/
<p id="p1" onmousedown="getEventTrigger(event)">點擊我試試</p>

/*JavaScript代碼*/
function getEventTrigger(event){
  var x = event.currentTarget;  
  alert("The id of the triggered element: " + x.id);
}

 

 　　2、Event.eventPhase屬性：eventPhase 屬性返回事件傳播的當前階段。它的值是下面的三個常量之一，它們分別表示捕獲階段、正常事件派發和起泡階段。

　　　　

window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(event){
        alert(event.eventPhase);　　//2
    }
    document.body.addEventListener("click",function(event){
        alert(event.eventPhase);　　//1
    },true);
    document.body.onclick = function(event){
        alert(event.eventPhase);　　//3
    }
}