浅谈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); //
div.addEventListener("click" , function(){alert("第二次执行");} , true); //
btn.addEventListener("click" , function(){alert("button 执行");}); //
在这里,给 1 函数alert后加上stopImmediatePropagation, 那么之后弹出窗口“第一次执行”
但是如果给 1 函数alert后加上stopPropagation , 那么之后会弹出窗口“第一次执行”,“第二次执行”两个窗口
浅谈javascript中stopImmediatePropagation函数和stopPropagation函数的区别的更多相关文章
- 浅谈JavaScript中的柯里化函数
首先,不可避免的要引经据典啦,什么是柯里化函数呢(from baidu): 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
- 浅谈JavaScript中的正则表达式(适用初学者观看)
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
- 浅谈JavaScript中的Function引用类型
引言 在JavaScript中最有意思的就是函数了,这一切的根源在于函数实际上是一个对象.每一个函数都是Function类型的实例,而且都和其他引用类型的实例一样具有属性和方法.函数作为一个对象,因此 ...
- 浅谈HTTP中GET和POST请求方式的区别
浅谈HTTP中GET和POST请求的区别 HTTP认知: HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议.HTTP的底层是TCP/IP.所以GET和POST的底层也是TCP/IP,也 ...
- 浅谈JavaScript中的函数问题
前面的话:JavaScript可运行在所有主要平台的主流浏览器上,也可运行在每一个主流操作系统的服务器端上.所以呢,要想成为一名优秀的全栈工程师,必须懂得JavaScript语言.这是我整理的JS的部 ...
- 浅谈JavaScript中闭包
引言 闭包可以说是JavaScript中最有特色的一个地方,很好的理解闭包是更深层次的学习JavaScript的基础.这篇文章我们就来简单的谈下JavaScript下的闭包. 闭包是什么? 闭包是什么 ...
- 浅谈JavaScript中的继承
引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...
随机推荐
- JavaScript中Null和Undefined的深渊
探索JavaScript中Null和Undefined的深渊 当讨论JavaScript中的原始数据类型时,大多数人都知道的基本知识,从String,Number到Boolean.这些原始类型相当简单 ...
- BDD
Binding business requirements to .NET code http://www.specflow.org/ 行为驱动开发 BDD:Behavior Driven Devel ...
- C/C++基础知识总结——数据的共享与保护
1. 标识符的作用域与可见性 1.1 作用域 标识符的作用域包括:函数原型作用域.局部作用域.类作用域.命名空间作用域 (1) 函数原型作用域:函数的参与的作用域就是从函数的开始到结束 (2) 局部作 ...
- 自定义ModelValidatorProvider
MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息 Asp.net MVC中的提供非常简单易用的数据验证解决方案. 通过System.Compone ...
- [转]http://www.russbishop.net/xcode-exception-breakpoints
原文:http://www.russbishop.net/xcode-exception-breakpoints Many people are not aware of Xcode's powerf ...
- socket1
socket的那些事(1) TCP/IP 简单介绍 应用层 (Application):应用层是个很广泛的概念,有一些基本相同的系统级 TCP/IP 应用以及应用协议,也有许多的企业商业应用和互联网应 ...
- Mahout之(四)Taste的架构和部署Demo
Taste简介 Taste是Apache Mahout提供的一个协同过滤算法的高效实现,它是一个基于Java实现的可扩展的,高效的推荐引擎.Taste既实现了最基本的基于用户的和基于内容的推荐算法,同 ...
- web.xml加载过程
web.xml加载过程:1 启动WEB项目的时候,容器(如:Tomcat)会读他的配置文件web.xml读两个节点 <listener></listener>和<con ...
- ASP.NET WebAPI HTTPS
参照文档 http://southworks.com/blog/2014/06/16/enabling-ssl-client-certificates-in-asp-net-web-api/ 第一 ...
- [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading
上次在<iOS学习笔记46——图片异步加载之SDWebImage>中介绍过一个开源的图片异步加载库,今天来介绍另外一个功能类似的EGOImageLoading,看名字知道,之前的一篇学习笔 ...