理解jquery事件冒泡
更新時間：2016年01月03日 13:05:16 投稿：lijiao
這篇文章主要介紹了jquery事件冒泡，以及如何阻止jQuery事件冒泡現(xiàn)象，感興趣的朋友可以參考一下
一、什么是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" >點擊查看效果</a></p>
</body>
</html>
在以上代碼中，我們可能只想點擊錨點后彈出“我是third”，但是令人奇怪的事情卻是所有父元素定義的click事件都會被觸發(fā)。這就是一個典型的事件冒泡效果。所謂的冒泡事件就是，如果在某一個對象上觸發(fā)某一類事件（如上例的click事件），那么此事件會向對象的父級對象傳播，并觸發(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()這個是標準瀏覽器。
以上代碼中，一個單元格阻止了事件冒泡，一個沒有阻止事件冒泡，希望對大家的學習有所幫助。
相關文章
jQuery動態(tài)加載css文件實現(xiàn)方法
使用jQuery來加載一個外部的 css 文件，首先創(chuàng)建一個 link 元素，并將它添加到 標記中即可。那么基于jquery代碼如何實現(xiàn)呢？下面小編給大家介紹jQuery動態(tài)加載css文件實現(xiàn)方法，需要的朋友參考下吧2016-06-06
Jquery網(wǎng)頁內滑動緩沖導航的實現(xiàn)代碼
這篇文章主要介紹了Jquery網(wǎng)頁內滑動緩沖導航的實現(xiàn)代碼,實現(xiàn)滑動緩沖的方式實現(xiàn)頁內導航，用戶體驗大大提升需要的朋友可以參考下2015-04-04
這里給大家推薦幾款比較好用實用易用的jQuery帶箭頭提示框tooltips插件，兼容性都很不錯，大家根據(jù)需要自由選擇吧2014-11-11
簡單上下翻，函數(shù)，獲取元素。2010-04-04
這篇文章主要介紹了JQuery查找DOM節(jié)點的方法,實例分析了jQuery選擇器實現(xiàn)DOM元素結點與屬性結點的查找技巧,需要的朋友可以參考下2015-06-06
jQuery Lightbox（balupton版）圖片展示插件demo2010-04-04
利用jQuery插件擴展識別瀏覽器內核與外殼的類型和版本的實現(xiàn)代碼
在平時的B/S開發(fā)中，經(jīng)常需要知道瀏覽器的內核類型和版本，甚至，有時還需要知道瀏覽器的外殼類型和版本2011-10-10
通過pjax實現(xiàn)無刷新翻頁(兼容新版jquery)
這篇文章主要介紹了通過pjax實現(xiàn)無刷新翻頁，兼容新版jquery，使用心得方法,需要的朋友可以參考下2014-01-01
jQuery實現(xiàn)鼠標移到某個對象時彈出顯示層功能
這篇文章主要介紹了jQuery實現(xiàn)鼠標移到某個對象時彈出顯示層功能,涉及jQuery基于事件響應動態(tài)操作頁面元素屬性相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
下面小編就為大家?guī)硪黄猨query取消事件冒泡的三種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05