快捷導(dǎo)航

理解jquery事件冒泡

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

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

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

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

在以上代碼中，我們可能只想點擊錨點后彈出“我是third”，但是令人奇怪的事情卻是所有父元素定義的click事件都會被觸發(fā)。這就是一個典型的事件冒泡效果。所謂的冒泡事件就是，如果在某一個對象上觸發(fā)某一類事件（如上例的click事件），那么此事件會向?qū)ο蟮母讣墝ο髠鞑?，并觸發(fā)父對象上定義的同類事件。事件傳播的方向是從最底層到最頂層，類似于水泡從水底浮上來一般。
二、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事件觸發(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)這個用來兼容IE8和IE8一下瀏覽器。
2. evt.stopPropagation()這個是標(biāo)準(zhǔn)瀏覽器。

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

您可能感興趣的文章: