在事件处理程序中,每个事件处理程序中间都会有一个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); //
div.addEventListener("click" , function(){alert("第二次执行");} , true); //
btn.addEventListener("click" , function(){alert("button 执行");}); //

    

  在这里,给 1 函数alert后加上stopImmediatePropagation, 那么之后弹出窗口“第一次执行”
  但是如果给 1 函数alert后加上stopPropagation , 那么之后会弹出窗口“第一次执行”,“第二次执行”两个窗口

浅谈javascript中stopImmediatePropagation函数和stopPropagation函数的区别的更多相关文章

  1. 浅谈JavaScript中的柯里化函数

    首先,不可避免的要引经据典啦,什么是柯里化函数呢(from baidu): 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返 ...

  2. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  3. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  4. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  5. 浅谈JavaScript中的Function引用类型

    引言 在JavaScript中最有意思的就是函数了,这一切的根源在于函数实际上是一个对象.每一个函数都是Function类型的实例,而且都和其他引用类型的实例一样具有属性和方法.函数作为一个对象,因此 ...

  6. 浅谈HTTP中GET和POST请求方式的区别

    浅谈HTTP中GET和POST请求的区别 HTTP认知: HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议.HTTP的底层是TCP/IP.所以GET和POST的底层也是TCP/IP,也 ...

  7. 浅谈JavaScript中的函数问题

    前面的话:JavaScript可运行在所有主要平台的主流浏览器上,也可运行在每一个主流操作系统的服务器端上.所以呢,要想成为一名优秀的全栈工程师,必须懂得JavaScript语言.这是我整理的JS的部 ...

  8. 浅谈JavaScript中闭包

    引言 闭包可以说是JavaScript中最有特色的一个地方,很好的理解闭包是更深层次的学习JavaScript的基础.这篇文章我们就来简单的谈下JavaScript下的闭包. 闭包是什么? 闭包是什么 ...

  9. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

随机推荐

  1. IIS 7.5配置PHP站点

    准备工作 首先下载并解压PHP程序文件,比如解压到C:/PHP/,不需要安装.IIS安装略. 第一步:添加ISAPI筛选器和CGI功能 控制面板—>程序和功能—>打开或关闭Windows功 ...

  2. mac 下nginx加入开机启动

    通过brew install nginx后设置开机启动项 sudo cp /usr/local/opt/nginx/*.plist /Library/LaunchDaemonssudo launchc ...

  3. linux 之 getopt_long()

    文件 #include <getopt.h> 函数原型 int getopt_long(int argc, char * const argv[], const char *optstri ...

  4. kindeditor图片上传 struts2实现

    一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\js ...

  5. uva 408 Uniform Generator

    Uniform Generator  Computer simulations often require random numbers. One way to generate pseudo-ran ...

  6. 设置启动MyEclipse8.5的时候选择工作区间

    以前我的MyEclipse启动的时候默认都会进入到指定工作区间,比如:D:\MyEclipse,最近不知道怎么回事,每次启动的时候都是空的,必须要重新Switch Workspace选择一次 网上查找 ...

  7. MyEclipse从数据库表反向生成实体类之Hibernate方式(反向工程)

    一.打开Myeclipse Database Explorer 二.新建[New..] 三.选择数据库,添加驱动 四.测试连接 五.选中数据库中的表单击右键选择[Hibernate Rever..] ...

  8. Morn简介及使用教程

    [Morn UI系列教程]Morn简介及使用教程 网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Morn UI学 ...

  9. 对比AutoResetEvent和ManualResetEvent

    ManualResetEvent和AutoResetEvent 比较 ManualResetEvent和AutoResetEvent都继承自EventWaitHandler,它们的唯一区别就在于父类 ...

  10. XNA 4.0 环境搭建和 Hello World,Windows Phone 游戏开发

    XNA 4.0 环境搭建和 Hello World,Windows Phone 游戏开发 使用 Scene 类在 XNA 中创建不同的场景(八) 摘要: 平方已经开发了一些 Windows Phone ...