浅谈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中继承实现的点点滴滴. 原型链介绍 原 ...
随机推荐
- 设计模式20---设计模式之备忘录模式(Memento)(行为型)
1.讲解备忘录模式 备忘录模式(Memento Pattern)又叫做快照模式(Snapshot Pattern)或Token模式,是GoF的23种设计模式之一,属于行为模式. 1.1定义 在不破坏封 ...
- SugarSync网盘之XML解析
iOS的XML解析 刚在应用里支持了SugarSync网盘.其实也是第一次听说这个网盘,不过在国外貌似还蛮有名,这些都不是重点,重点是借此来总结一下iOS的XML解析.Xml想必也不陌生了,但是在iO ...
- 图解Javascript之Function
好东西分享给大家,但要尊重事实!!!因此特别说明:本图非我本人亲自所作,乃我大天朝网友所绘制.个人感觉此图,覆盖全面,细节考虑甚周全,因此分享给大家,同时在此特别感谢网友的无私分享!
- Go Code
目录 备注工作空间(Workspaces)GOPATH环境变量包路径(Package Path)你的第一个程序你的第一个类库包名字(Package Name)测试集成备注 备注返回目录 此文主要是对官 ...
- IOS学习之路五(SpriteKit 开发飞机大战小游戏一)
参考SpriteKit 创建游戏的教程今天自己动手做了一下,现在记录一下自己怎么做的,今天之做了第一步,一共有三个部分. 第一步,项目搭建. 项目所用图片资源:点击打开链接 1.在Xcode打开之后, ...
- Aspose.cells异步读写操作
public class AsyncExcel : Excel { static readonly object _objForlock = new object(); //public List&l ...
- Oracle随机获取记录
, )) RANDOMNUM FROM DUAL) B ORDER BY B.RANDOMNUM
- VS2010 下编译 cocos2d-x-2.1.4
在VS2010 下编译 cocos2d-x-2.1.4 首先感谢 cocos2d-x 团队为我们做出这么好的跨平台框架,让我们这些码农省了很多时间,事半功倍. 里沃特最近在编译 win32 版本的 ...
- CVPR 2013
CVPR2013大部分文章都已经公开了,大家可以通过下面的网址访问: http://www.cv-foundation.org/openaccess/CVPR2013.py# 还有一篇根据CVPR20 ...
- Entity Framework 之 Code First
使用NuGet助您玩转代码生成数据————Entity Framework 之 Code First [前言] 如果是Code First老鸟或者对Entity Framework不感兴趣,就不用浪费 ...