js中的stopImmediatePropagation方法和stopPropagation方法的區別

看到e.stopImmediatePropagation()這個方法時，記憶有點模糊了。特地回顧一下。

基本概念

• stopImmediatePropagation方法：該方法作用在當前節點及事件鏈的所有后續節點上，目的是在執行完當前事件處理程序后，停止當前節點及所有后續節點的同類事件處理程序的運行。
• stopPropagation方法：該方法作用在后續節點上，目的在執行完綁定到當前元素上的所有同類事件處理程序后，停止執行所有后續節點的同類事件處理程序。

區別

• 兩個方法只差一個Immediate
• stopPropagation方法，調用后，會立即停止對后續節點的訪問，但是會執行完綁定到當前節點上的所有同類事件處理程序；簡言之，只能阻止父類元素的冒泡，就是一個元素綁定了多個同類事件（比如click），且父元素也綁定了該類事件，那么在元素調用stopPropagation方法后，父元素不會執行同類事件，但是該元素綁定的多個同類事件會依次執行。
• stopImmediatePropagation方法，調用后，除了所有后續節點，綁定到當前元素上的、當前事件處理程序之后的事件處理程序都不會執行。簡言之，既能阻止父類元素冒泡，也能阻止同類事件的執行。假如一個元素綁定了多個同類事件（比如click），且父元素也綁定了該類事件，那么在元素調用stopImmediatePropagation方法后，父元素不會執行同類事件，該元素執行完當前事件，綁定的同類事件也不會執行。

舉例

<div id="div">
    <input type="text" id="input"/>
</div>

var dom = document.querySelector('#input');
    dom.addEventListener('blur', function (e) {
      console.log('blur 1');
    });
    dom.addEventListener('blur', function (e) {
      console.log('blur 2');
    });

    dom.addEventListener('keyup', function (e) {
      console.log('keyup 1');
    })
    dom.addEventListener('keyup', function (e) {
      console.log('keyup 2');
    })

    dom.addEventListener('click', function (e) {
      //e.stopPropagation();
      e.stopImmediatePropagation();
      console.log('dom click 1');
    })
    dom.addEventListener('click', function (e) {
      console.log('dom click 2');
    })

    var div = document.querySelector('#div');
    div.addEventListener('click', function (e) {
      console.log('div click 1');
    })
    div.addEventListener('click', function (e) {
      console.log('div click 2');
    })

結果說明：

• 不調用，點擊輸入框，dom click 1，dom click2，div click 1，div click2會依次執行，blur，keyup事件觸發后也是依次執行。
• 調用stopPropagation方法后，點擊輸入框，dom click 1，dom click2會依次執行，但阻止冒泡，父類元素的事同類事件不會執行。blur，keyup事件觸發后會依次執行。
• 調用stopImmediatePropagation方法后，點擊輸入框，只會執行dom click1，會阻止冒泡，且當前元素綁定的同類事件也會阻止。blur，keyup事件觸發后會依次執行。