理解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小游戏实现代码
Aug 19 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
JS Input里添加小图标的两种方法
Nov 11 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
原生js生成图片验证码
Oct 11 Javascript
微信小程序实现首页弹出广告
Dec 03 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 intval的测试代码发现问题
2008/07/27 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
详解Python自建logging模块
2018/01/29 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python自定义线程池实现方法分析
2018/02/07 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python实现按行分割文件
2019/07/22 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
大学自我鉴定
2013/12/20 职场文书
清洁工表扬信
2014/01/08 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
开学寄语大全
2014/04/08 职场文书
物业保安岗位职责
2014/07/02 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
三人合伙协议书范本
2014/10/29 职场文书
明星邀请函
2015/02/02 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript