您现在的位置:首页 --> JavaScript --> jQuery事件的冒泡过程
jQuery事件的冒泡过程
浏览:2928次 出处信息
严格来说,事件在触发后被分为两个阶段,一个是捕获(Capture),另一个则是冒泡(Bubbling)。不过大多数浏览器不是都支持捕获阶段,jQuery也不支持,因此在事件触发后,往往执行冒泡过程。冒泡的实质就是事件执行中的顺序,通过以下例子来解释。
<!DOCTYPE HTML> <html> <head> <meta content=\"charset=utf-8\"> <title>事件中的冒泡现象</title> <script type=\"text/javascript\" src=\"jquery-1.4.2.min.js\"> </script> <script type=\"text/javascript\"> $(function(){ $(\"#hr_three\").click(function() { alert(\"最里层\"); }); $(\"#divTwo\").click(function() { alert(\"中间层\"); }); $(\"#divOne\").click(function() { alert(\"最外层\"); }); }); </script> </head> <body> <div id=\"divOne\"> <div id=\"divTwo\"> <a id=\"hr_three\" href= \"http://tinyliu.info\">点击我</a> </div> </div> </body> </html>
该页面分为三层,分别是divOne、divTwo和hr_three,他们都有各自的click事件。运行页面时点击“点击我”,会依次弹出“最里层”、“中间层”、“最外层”,然后链接到tinyliu.info。这就是事件的冒泡过程,虽然只点击了一次链接,但链接外围的divTwo的事件也被触发,同时divTwo的外围divOne的事件也随之被触发,一共执行了三次alert,从里到外。整个事件波及的过程就像水泡一样往外冒,故称为冒泡过程。
在实际需要中,很多时候并不希望事件的冒泡现象发生,jQuery中可通过两种方法来阻止冒泡过程的发生。
1. event.stopPropagation();
$(function(){ $(\"#hr_three\").click(function() { alert(\"最里层\"); event.stopPropagation(); }); });
2. return false;
$(function(){ $(\"#hr_three\").click(function() { alert(\"最里层\"); return false; }); });
他们的区别在于stopPropagation只阻止冒泡过程(即只触发一次alert),不会阻止事件的默认行为(跳转到tinyliu.info);而return false不仅会阻止冒泡过程,也会组织事件的默认行为,alert完成后不会跳转到tinyliu.info。与此相关的还有一个preventDefault函数,此函数与return false相反,它不会阻止冒泡过程,但会阻止默认行为。
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46520)
- 分享一个JQUERY颜色选择插件 (阅读:12650)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9688)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7757)
- jQuery的data()方法 (阅读:7585)
- jQuery性能优化指南 (阅读:7325)
- jQuery Color Animations颜色动画插件 (阅读:7088)
- 精于图片处理的10款jQuery插件 (阅读:6219)
- 深入浅出交换类排序算法(冒泡排序,快速排序) (阅读:5986)
- jQuery中getJSON跨域原理详解 (阅读:5620)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:如何用jQuery创建很酷的动态菜单
后一篇:JavaScript6看上去很美 >>
文章信息
- 作者:tinyliu 来源: Accumulating
- 标签: jQuery 事件 冒泡
- 发布时间:2011-11-23 23:57:56
建议继续学习
近3天十大热文
- [56] Oracle MTS模式下 进程地址与会话信
- [56] IOS安全–浅谈关于IOS加固的几种方法
- [55] 如何拿下简短的域名
- [54] 图书馆的世界纪录
- [52] android 开发入门
- [52] Go Reflect 性能
- [50] 读书笔记-壹百度:百度十年千倍的29条法则
- [49] 【社会化设计】自我(self)部分――欢迎区
- [38] 程序员技术练级攻略
- [33] 视觉调整-设计师 vs. 逻辑