理解jquery事件冒泡
一、什么是jquery事件冒泡
在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡。
代码实例如下:
<html>
<head>
<metacharset="gb2312">
<title>事件冒泡</title>
<scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#second").click(function(){
alert("我是second");
})
$("#first").click(function(){
alert("我是first");
})
})
</script>
</head>
<body>
<pid="first"><aid="second"href="http://www.baidu.com">点击查看效果</a></p>
</body>
</html>
在以上代码中，我们可能只想点击锚点后弹出“我是third”，但是令人奇怪的事情却是所有父元素定义的click事件都会被触发。这就是一个典型的事件冒泡效果。所谓的冒泡事件就是，如果在某一个对象上触发某一类事件（如上例的click事件），那么此事件会向对象的父级对象传播，并触发父对象上定义的同类事件。事件传播的方向是从最底层到最顶层，类似于水泡从水底浮上来一般。
二、javascript如何阻止事件冒泡
冒泡事件能够带来便利，有时候也会带来麻烦，下面就简单介绍一下如何阻止事件冒泡。
代码实例如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<head>
<title>事件冒泡</title>
<styletype="text/css">
#grandfather{
border:1pxsolid#0066FF;
cellpadding:0px;
cellspacing:0px;
}
#grandfathertd{
border:1pxsolid#0066FF;
}
</style>
<scripttype="text/javascript">
functiontrclick(){
alert("父亲的onclick事件触发");
}
functiontableclick(){
alert("祖父的onclick事件触发");
}
window.onload=function(){
vargrandfather=document.getElementById("grandfather");
varfather=document.getElementById("father");
varnoStop=document.getElementById("noStop");
varhaveStop=document.getElementById("haveStop");
grandfather.onclick=tableclick;
father.onclick=trclick;
noStop.onclick=function(){
alert("没有阻止冒泡的子元素");
}
haveStop.onclick=function(evt){
alert("阻止冒泡的子元素");
if(window.event){
event.cancelBubble=true;
}
elseif(evt){
evt.stopPropagation();
}
}
}
</script>
</head>
<body>
<tablewidth="204"id="grandfather">
<tr>
<tdwidth="96"></td>
<tdwidth="96"></td>
</tr>
<trid="father">
<tdid="noStop">没有阻止事件冒泡</td>
<tdid="haveStop">阻止了事件冒泡</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
代码注释:
1.if(window.event)这个用来兼容IE8和IE8一下浏览器。
2.evt.stopPropagation()这个是标准浏览器。
以上代码中，一个单元格阻止了事件冒泡，一个没有阻止事件冒泡，希望对大家的学习有所帮助。