jQuery中事件对象e的事件冒泡用法示例介绍


Posted in Javascript onApril 25, 2014

之前查手册的时候没有看到有事件对象这一概念,当时我想实现的是点击一个文本框出现一个下拉多选框,在文本框失去焦点是触发blur事件,从而使下拉框隐藏起来。但是当我要选择多选框是也会使它隐藏,就不能进行选择了,这让我很郁闷。查了一天的资料,终于在脱离了焦点这一块。在网上发现有一个事件冒泡的东西,发现通过点击可以实现我的这一功能。

e.stopPropagation()阻止事件冒泡

<head> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
</head> 
<body> 
<table> 
<tr> 
<td><span>冒泡事件测试</span></td> 
</tr> 
</table> 
</body>

我们先看这段代码:
<script type="text/javascript"> 
$(function () { 
$("table").click(function () { alert("table alert"); }); 
$("td").click(function () { alert("td alert"); }); 
$("span").click(function (){ 
alert("span alert"); 
}); 
}); 
</script>

我们会看到这样的情况:span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上,从里到外,事件依次触发。能依次触发的条件是拥有同一事件的多个嵌套的标签,切事件会同时同步发生,会从里到外实现同一事件的响应。

有的时候我们不希望事件冒泡咋办?

<script type="text/javascript"> 
$(function () { 
$("table").click(function () { alert("table alert"); }); 
$("td").click(function () { alert("td alert"); }); 
$("span").click(function (e){ 
alert("span alert"); 
e.stopPropagation(); 
}); 
}); 
</script>

当我给整个document实现click事件是,可以给文本框和下拉选框阻止事件冒泡,使得再点击她们的同时不会使document触发事件。

如果想获得事件相关信息,就要给知识方法加一个e对象,e就是事件对象。

e.preventDefault()阻止事件默认行为。

$("a").click(function (e) { 
alert("默认行为被禁止喽"); 
e.preventDefault(); 
}); 
<a href="http://www.baidu.com">测试</a>

return false等效于同时调用e.preventDefault()和e.stopPropagation()

return false除了阻止默认行为之外,还会阻止事件冒泡。如果手上有一份jquery源代码的话,可查看其中有如下代码:

if (ret===false){ 
event.preventDefault(); 

event.stopPropagation(); 
}
Javascript 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
js实现搜索提示框效果
Sep 05 Javascript
jquery实现select选中行、列合计示例
Apr 25 #Javascript
js点击事件链接的问题解决
Apr 25 #Javascript
对js关键字命名的疑问介绍
Apr 25 #Javascript
html5+javascript制作简易画板附图
Apr 25 #Javascript
js实现字符串的16进制编码不加密
Apr 25 #Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 #Javascript
jquery操作select大全
Apr 25 #Javascript
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
jQuery功能函数详解
2015/02/01 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
js 作用域和变量详解
2017/02/16 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python三引号输出方法
2019/02/27 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
电信专业应届生自荐信
2013/09/28 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
卫生系统先进事迹
2014/05/13 职场文书
预备党员公开承诺书
2014/05/28 职场文书
超市创业计划书
2014/09/15 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
教学副校长工作总结
2015/08/13 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫