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 1dom click2div click 1div click2会依次执行,blurkeyup事件触发后也是依次执行。
  • 调用stopPropagation方法后,点击输入框,dom click 1dom click2会依次执行,但阻止冒泡,父类元素的事同类事件不会执行。blurkeyup事件触发后会依次执行。
  • 调用stopImmediatePropagation方法后,点击输入框,只会执行dom click1,会阻止冒泡,且当前元素绑定的同类事件也会阻止。blurkeyup事件触发后会依次执行。
posted @ 2018-10-16 09:53  ESnail  阅读(1580)  评论(0编辑  收藏