浅谈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 , 那么之后会弹出窗口“第一次执行”,“第二次执行”两个窗口

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,556评论 1 11
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,431评论 0 2
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,159评论 1 32
  • 增长黑客其精髓在于利用分析数据指导产品,通过快节奏测试和迭代,以极低甚至零成本获取并留存用户。 增长黑客的自我修养...
    7in10阅读 845评论 1 49
  • 现在妞妞说的话越来越多了,很多好搞笑很经典的话,当时听了真是觉得好笑。就比如今天早晨我给妞妞冲好奶套上了套子,妞妞...
    永远在进步的爸爸阅读 570评论 0 50