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