快捷導(dǎo)航

理解jquery事件冒泡

更新時(shí)間：2016年01月03日 13:05:16 投稿：lijiao

這篇文章主要介紹了jquery事件冒泡，以及如何阻止jQuery事件冒泡現(xiàn)象，感興趣的朋友可以參考一下

一、什么是jquery事件冒泡
在很多教材或者手冊(cè)都可能會(huì)涉及到事件冒泡的概念，老手來(lái)說(shuō)這當(dāng)然是最基本的概念，但往往對(duì)于初學(xué)者可能比較陌生或者說(shuō)從來(lái)沒有聽說(shuō)過(guò)。下面就結(jié)合代碼實(shí)例來(lái)簡(jiǎn)單介紹一下什么是事件冒泡。
代碼實(shí)例如下:

<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" >點(diǎn)擊查看效果</a></p>
</body>
</html>

在以上代碼中，我們可能只想點(diǎn)擊錨點(diǎn)后彈出“我是third”，但是令人奇怪的事情卻是所有父元素定義的click事件都會(huì)被觸發(fā)。這就是一個(gè)典型的事件冒泡效果。所謂的冒泡事件就是，如果在某一個(gè)對(duì)象上觸發(fā)某一類事件（如上例的click事件），那么此事件會(huì)向?qū)ο蟮母讣?jí)對(duì)象傳播，并觸發(fā)父對(duì)象上定義的同類事件。事件傳播的方向是從最底層到最頂層，類似于水泡從水底浮上來(lái)一般。
二、javascript如何阻止事件冒泡
冒泡事件能夠帶來(lái)便利，有時(shí)候也會(huì)帶來(lái)麻煩，下面就簡(jiǎn)單介紹一下如何阻止事件冒泡。
代碼實(shí)例如下:

<!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事件觸發(fā)");
}
function tableclick(){
 alert("祖父的onclick事件觸發(fā)");
}
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)這個(gè)用來(lái)兼容IE8和IE8一下瀏覽器。
2. evt.stopPropagation()這個(gè)是標(biāo)準(zhǔn)瀏覽器。

以上代碼中，一個(gè)單元格阻止了事件冒泡，一個(gè)沒有阻止事件冒泡，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: