談javascript中stopImmediatePropagation函數和stopPropagation函數的區別

 

　　在事件處理程序中，每個事件處理程序中間都會有一個event對象，而這個event對象有兩個方法，一個是stopPropagation方法，一個是stopImmediatePropagation方法，兩個方法只差一個Immediate，這裏就說說這兩個方法的區別

　　1、stopImmediatePropagation方法：

　　　　stopImmediatePropagation方法作用在當前節點以及事件鏈上的所有後續節點上，目的是在執行完當前事件處理程序之後，停止當前節點以及所有後續節點的事件處理程序的運行

　　2、stopPropagation方法

　　　　stopPropagation方法作用在後續節點上，目的在執行完綁定到當前元素上的所有事件處理程序之後，停止執行所有後續節點的事件處理程序

　　

　　區別：

　　　　從概念上講，在調用完stopPropagation函數之後，就會立即停止對後續節點的訪問，但是會執行完綁定到當前節點上的所有事件處理程序；而調用stopImmediatePropagation函數之後，除了所有後續節點，綁定到當前元素上的、當前事件處理程序之後的事件處理程序就不會再執行了

　　舉個例子：

　　　　//html代碼

　　　　

<div id = "div1">
    <button id = "button1"></button>
</div>

　　　　//js代碼

　　　　

　　var div = document.getElementById("div1");
    var btn = document.getElementById("button1");
            
    div.addEventListener("click" , function(){alert("第一次執行");} , true);        //1
    div.addEventListener("click" , function(){alert("第二次執行");} , true);        //2
    btn.addEventListener("click" , function(){alert("button 執行");});            //3

　　　　

　　在這裏，給 1 函數alert後加上stopImmediatePropagation， 那麼之後彈出窗口“第一次執行”
　　但是如果給 1 函數alert後加上stopPropagation ， 那麼之後會彈出窗口“第一次執行”，“第二次執行”兩個窗口