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事件触发后会依次执行。