理解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中的eval函数
Nov 02 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
javascript的push使用指南
Dec 05 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
JavaScript中的闭包
Feb 24 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 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注销代码(session注销)
2012/05/31 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
在vue-cli中组件通信的方法
2017/12/16 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python模拟实现斗地主发牌
2020/01/07 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
Python中如何添加自定义模块
2020/06/09 Python
python如何爬取网页中的文字
2020/07/28 Python
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
法学专业毕业生自荐信范文
2013/12/18 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
旷课检讨书
2015/01/26 职场文书
财务人员岗位职责
2015/02/03 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS