W3C對DOM2.0定義的標準事件

DOM2.0模型將事件處理流程分爲三個階段：

　　1、事件捕獲階段，

　　2、事件目標階段，

　　3、事件起泡階段。

具體如圖（圖片來源於網絡，侵刪）

事件捕獲：當某個元素觸發某個事件（如onclick），頂層對象document就會發出一個事件流，隨着DOM樹的節點向目標元素節點流去，直到到達事件真正發生的目標元素。在這個過程當中，事件相應的監聽函數是不會被觸發的。

事件目標：當到達目標元素以後，執行目標元素該事件相應的處理函數。若是沒有綁定監聽函數，那就不執行。

事件起泡：從目標元素開始，往頂層元素傳播。途中若是有節點綁定了相應的事件處理函數，這些函數都會被一次觸發。若是想阻止事件起泡，能夠使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

 解釋：比方說：ul，li，p，a都綁定了一個click事件，被點擊後執行彈出本身的nodeName

　　若是是捕獲模式下的綁定那彈出順序是：ul -> li -> p -> a.

　　若是是冒泡模式下的綁定那彈出順序是：a -> p -> li -> ul.

     chrome和ff瀏覽器的事件模式是冒泡

　　ie瀏覽器的事件模式是捕獲

　　上邊介紹的是w3c裏的事件，

W3C標準中那個addEventListener()函數,它裏面最後一個參數false表明冒泡,true表明捕獲,這是什麼意思呢?由於W3C做爲一個標準,它選擇了一個相對摺中的方案去處理事件,也就是任何在W3C事件模型中發生的事件都先進入捕獲階段,而後在進入冒泡階段,保證一個事件會經歷這兩個階段,以適應IE和其餘非IE瀏覽器,這樣使用者能夠根據需求選擇將事件註冊到哪個階段

代碼在這裏：

　　

<ul id="ul">
    <li id="li">
        <p id="p">
            <a id="a" href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
        </p>
    </li>
</ul>


// 這是js代碼
    var ul = document.getElementById('ul'); var li = document.getElementById('li'); var p = document.getElementById('p'); var a= document.getElementById('a'); ul.addEventListener('click',function(e){ console.log("ul"); },true); li.addEventListener('click',function(e){ console.log("li"); },true); p.addEventListener('click',function(e){ console.log("p"); },true); a.addEventListener('click',function(e){ console.log("a"); },true);

 

這裏是執行結果：

捕獲:   

冒泡：