【jQuery】jQuery中的事件捕获与事件冒泡
在介绍之前,先说一下JavaScript中的事件流概念。事件流描述的是从页面中接受事件的顺序。



<div id="container">
<span>
<a href="javascript:void(0)">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptas!</a>
</span>
</div>
对应的jQuery代码如下:
$('#container').mouseout(function () {
$(this).hide("slow");
});
上述这样的代码,由于事件冒泡,
① 从a/span移出,但仍在div内部,div会hide;
② 从div移入a/span,div也会hide;
③ 当然,完全移出div,div也会hide。
按照文章中提出的一个方案,给div内部的每个元素都注册相应事件,并使用.stopPropagation()方法阻止事件进一步传播。结果如下:
① 移动方向:a/span -> div -> div之外,成功。
② 移动方向:div -> a/span,div消失,失败。
【jQuery】jQuery中的事件捕获与事件冒泡的更多相关文章
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- js中关于事件捕获与事件冒泡的小实验
1.事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div - ...
- JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- js事件捕获,事件冒泡,事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人 ...
- JS事件捕获和事件冒泡
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 14.0px "Helvetica Neue" ...
- 【JavaScript】事件捕获、事件冒泡与事件委托
2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...
- 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理
原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...
- DOM事件机制(事件捕获和事件冒泡和事件委托)
内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...
- javascript -- 事件捕获,事件冒泡
使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...
随机推荐
- oracle 表空间tablespace
一.Oracle 表空间的组成 Everoone knows Oracle数据库真正存放数据的是数据文件,Oracle表空间是逻辑上的概念,他在物理上是并不存在的,把多个DataFile合并到一起就是 ...
- CMS: DNN And Umbraco
在比较了众多CMS系统后,还是把焦点定在DNN和Umbraco两个系统上,这两个系统都可以使用UserControl扩展自己需要的功能. DNN的架构比较复杂,Module.Skin.Containe ...
- Yii “CDbConnection failed to open the DB connection: could not find driver"解决办法
前言:用Yii框架做项目时,有时会遇到“CDbConnection failed to open the DB connection: could not find driver”这个问题,这个问题通 ...
- jreble安装 in idea
http://www.cnblogs.com/littlehb/archive/2013/04/19/3031045.html
- unity收集log工具
参考 yusong:http://www.xuanyusong.com/archives/2477 凉鞋 :https://www.cnblogs.com/liangxiegame/p/Uni ...
- 跨域拦截Access-Control-Allow-Origin设置多个origin
在Extjs和java项目碰到了需要同时处理跨域,外部要访问后台接口的问题 原来的代码是这样,只能设置一个extjs前台需要过滤的跨域请求 package com.xgt.config; import ...
- 打开usb调试的方法
方法一: settings --> about tablet --> build number(疯狂点击) -->回退 developer options --> USB d ...
- SSM实现批量删除功能
批量删除功能的实现 其实实现这个功能还是挺简单的 因为我这是直接拼接的,所以用了DOM方法来获取id话不多说直接上代码首先是复选框全选和反选这里的话 获取最上面一个复选框的状态同步到拼接的复选框 $ ...
- 浅谈WebService之JAX-RS与spring整合
背景:首先谈一下webservice: 1.Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序, 可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发 ...
- spring 学习总结(一)
一.spring概述 1.spring 是什么? Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.Spring是于2 ...