摘要：如圖使用事件捕獲模式注冊事件監聽對最外層，中間層，最內層分別用捕獲模式注冊事件監聽，我們上面說了，如果使用捕獲模式，那么第三個參數應該是，否則則是冒泡模式，如果不聲明，默認為冒泡模式。

來源: 個人博客

想必好多童鞋都有直接復制粘貼event.preventDefault() 或者event.stopPropagation() 的經歷，但是為什么這樣做不甚了解，今天我們的目的就是要徹底搞懂這一區別。

為了徹底弄清楚它們之間的區別，我不得不要先說一下javascript中兩種事件傳播模式:

- 捕獲模式(capturing)
- 冒泡模式(bubbling)

捕獲模式又稱為“滴流模式”(trickling)，個人認為滴流模式更好理解，滴流就是“從上向下”，而冒泡就是“從下向上”，好了，先記住這兩種模式的特點。

同時你還要記住，這兩種模式是為了干什么的？
這兩種模式就是為了一點：決定html中“元素”(比如div, p, button)接收到事件的“順序”！當然接收到事件的順序不同，自然事件監聽函數被觸發的順序就不同了，于是間接地就出現了監聽函數被執行順序的不同。

所以。。

當事件發生時，該事件首先被最外層元素接受到，然后依次向內層元素傳播。（從上向下）

當事件發生時，該事件首先被最內層元素接受到，然后依次向外層元素傳播。（從下向上）

順便提一句，以前網景公司主推捕獲模式而微軟則偏向于冒泡模式，不過兩者都是W3C DOM事件標準(2000)。

IE9以下僅僅支持冒泡模式，但是IE9+以及現在的主流瀏覽器都支持兩種模式了。

用哪種事件傳播方式完全是我們自己說了算的，我們可以使用

addEventListener(type, listener, useCapture)

來注冊事件處理方式，以及以何種傳播模式進行。

    

        click
    

我們可以對上述代碼添加一些樣式，這樣在網頁中更直觀。

    outerMost
    

        Middle
        click
    

如圖：

對最外層，中間層，最內層分別用“捕獲”模式注冊事件監聽，我們上面說了，如果使用捕獲模式，那么addEventListener第三個參數應該是true，否則則是冒泡模式，如果不聲明，默認為冒泡模式。

var outerElement = document.getElementById("outerMost");
var middleElement = document.getElementById("middle");
var innerElement = document.getElementById("innerMost");

outerElement.addEventListener("click", function () {
    console.log("trigger outermost div");
}, true);
middleElement.addEventListener("click", function () {
    console.log("trigger middle div");
}, true);
innerElement.addEventListener("click", function () {
    console.log("trigger innermost button");
}, true);

我們點擊中間層Middle字樣，如圖：

可以看到，事件觸發從外向里進行，如果大家把addEventListener中第三個參數改為false或者留空，點擊middle字樣，則會得到相反的結果，大家可以自己試一下。

終于到了談一談preventDefault 和 stopPropagation了，大家可能注意到了，我上面的例子中沒有涉及到點擊click鏈接，為什么呢？大家可以試一下，點擊click會發生什么？它會又立即跳轉到了當前頁面(因為我們href是一個空連接，這是鏈接元素的一個默認特性)，雖然我們的監聽函數被執行了，但是有時候我們不想這個默認特性被執行，比如，我們可能想在監聽函數里面改變div的背景顏色等等，這樣如果這個鏈接元素a默認特性的存在就會立即“刷新”了該頁面，讓我們的改變背景顏色無法進行。

所以為了“阻止”元素的“默認特性”，所以事件對象中有了一個preventDefault方法，如下：

innerElement.addEventListener("click", function (event) {
    event.preventDefault();
    console.log("trigger innermost button");
}, true);

這樣我們點擊click就會得到：

trigger outermost div
trigger middle div
trigger innermost button

那么stopPropagation呢？
向上面這種情況，如果當你點擊click的時候，只想出發綁定在click上的監聽函數，而不想觸發“傳播鏈”上的其他函數，那么則使用stopPropagation。

注意：你在那個事件監聽函數中使用event.stopPropagation();那么傳播鏈就會終止，向上面這個例子，因為我們使用的是捕獲模式，即使我們添加了：

innerElement.addEventListener("click", function (event) {
    event.preventDefault();
    event.stopPropagation();
    console.log("trigger innermost button");
}, true);

依然會得到和上面一樣的結果，為什么呢？因為捕獲模式是由外往里傳播，我們只是在a這里阻止了繼續像里傳播，因為沒有更里的元素了，所以結果一樣，為了更好地演示，我們可以把捕獲模式改為冒泡模式如下：

var outerElement = document.getElementById("outerMost");
var middleElement = document.getElementById("middle");
var innerElement = document.getElementById("innerMost");

outerElement.addEventListener("click", function (event) {
    console.log("trigger outermost div");
});
middleElement.addEventListener("click", function () {
    console.log("trigger middle div");
});
innerElement.addEventListener("click", function (event) {
    event.preventDefault();
    event.stopPropagation();
    console.log("trigger innermost button");
});

這樣點擊click，就只得到了一條log：

trigger innermost button

最后說一下return false; 這是jQuery中提供，比如：

$("#innermost").on("click", function () {
    return false;
})

它幫我們同時做了:

    - event.preventDefault();
    - event.stopPropagation();

這兩個工作，你可以看做是一種快捷方式，但是你在原生javascript中的監聽回調函數中寫return false; 是沒有任何用的。比如：

innerElement.addEventListener("click", function (event) {
    return false;
});

只是jQuery提供的一種特性。

來源：個人博客