理解jquery事件冒泡


Posted in Javascript onJanuary 03, 2016

一、什么是jquery事件冒泡
在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡。
代码实例如下:

<html>
<head>
<meta charset=" gb2312">
<title>事件冒泡</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#second").click(function(){
  alert("我是second");    
 })
 $("#first").click(function(){
  alert("我是first");    
 })
})
</script>
</head>
<body>
<p id="first"><a id="second" href="http://www.baidu.com">点击查看效果</a></p>
</body>
</html>

在以上代码中,我们可能只想点击锚点后弹出“我是third”,但是令人奇怪的事情却是所有父元素定义的click事件都会被触发。这就是一个典型的事件冒泡效果。所谓的冒泡事件就是,如果在某一个对象上触发某一类事件(如上例的click事件),那么此事件会向对象的父级对象传播,并触发父对象上定义的同类事件。事件传播的方向是从最底层到最顶层,类似于水泡从水底浮上来一般。
二、javascript如何阻止事件冒泡
冒泡事件能够带来便利,有时候也会带来麻烦,下面就简单介绍一下如何阻止事件冒泡。
代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>事件冒泡</title>
<style type="text/css">
#grandfather{
 border:1px solid #0066FF;
 cellpadding:0px;
 cellspacing:0px;
}
#grandfather td{
 border: 1px solid #0066FF;
}
</style>
<script type="text/javascript">
function trclick(){
 alert("父亲的onclick事件触发");
}
function tableclick(){
 alert("祖父的onclick事件触发");
}
window.onload=function(){
 var grandfather=document.getElementById("grandfather");
 var father=document.getElementById("father");
 var noStop=document.getElementById("noStop");
 var haveStop=document.getElementById("haveStop");
 
 grandfather.onclick=tableclick;
 father.onclick=trclick;
 
 noStop.onclick=function(){
 alert("没有阻止冒泡的子元素");
 }
 haveStop.onclick=function(evt){
 alert("阻止冒泡的子元素");
 if(window.event){
 event.cancelBubble=true;
 }
 else if(evt){
 evt.stopPropagation();
 }
 }
}
</script>
</head>
<body>
<table width="204" id="grandfather">
 <tr >
 <td width="96"></td>
 <td width="96"></td>
 </tr>
 <tr id="father">
 <td id="noStop">没有阻止事件冒泡</td>
 <td id="haveStop">阻止了事件冒泡</td>
 </tr>
 <tr>
 <td> </td>
 <td> </td>
 </tr>
</table>
</body>
</html>

代码注释:
1.if(window.event)这个用来兼容IE8和IE8一下浏览器。
2. evt.stopPropagation()这个是标准浏览器。

以上代码中,一个单元格阻止了事件冒泡,一个没有阻止事件冒泡,希望对大家的学习有所帮助。

Javascript 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
实例讲解避免javascript冲突的方法
Jan 03 #Javascript
详解js中class的多种函数封装方法
Jan 03 #Javascript
js中利用tagname和id获取元素的方法
Jan 03 #Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 #Javascript
基于javascript实现简单计算器功能
Jan 03 #Javascript
详解Javascript事件驱动编程
Jan 03 #Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 #Javascript
You might like
PHP源代码数组统计count分析
2011/08/02 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
Express使用html模板的详细代码
2017/09/18 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
python中remove函数的踩坑记录
2021/01/04 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
社会实践自我鉴定
2013/11/07 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
心得体会的写法
2014/09/05 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
项目验收申请报告
2015/05/15 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏