理解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 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
js实现多图和单图上传显示
Dec 18 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Django 视图层(view)的使用
2018/11/09 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
应届生人事助理求职信
2013/11/09 职场文书
产品设计开发计划书
2014/05/07 职场文书
普宁寺导游词
2015/02/04 职场文书
工作表现证明
2015/06/15 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python