jquery入門(mén)——事件機(jī)制之事件中的冒泡現(xiàn)象示例解釋
1、當(dāng)用戶瀏覽頁(yè)面時(shí)，瀏覽器會(huì)對(duì)頁(yè)面代碼進(jìn)行解釋或編譯——這個(gè)過(guò)程實(shí)質(zhì)上是通過(guò)事件來(lái)驅(qū)動(dòng)的，即頁(yè)面在加載時(shí)，執(zhí)行一個(gè)Load事件，在這個(gè)事件中實(shí)現(xiàn)瀏覽器編譯頁(yè)面代碼的過(guò)程。事件被觸發(fā)后被分為兩個(gè)階段，一個(gè)是捕獲（Capture），另一個(gè)是冒泡(Bubbing)，但大多瀏覽器并不是都支持捕獲階段，因此事件被觸發(fā)后，往往執(zhí)行冒泡過(guò)程。
2、示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件中的冒泡現(xiàn)象</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var intI=0;
$("body,div,#btnShow").click(function(event){
intI++;
$(".clsShow").show().html("您好，歡迎來(lái)到JQuery世界！").append("<div>執(zhí)行次數(shù)"+intI+"</div>");
})
});
</script>
</head>
<body>
<div>
<input id ="btnShow" type="button" value ="點(diǎn)擊" class ="btn"/>
</div>
<div class ="clsShow"></div>
</body>
</html>
3、效果圖預(yù)覽：
點(diǎn)擊后：
點(diǎn)擊一次后，顯示執(zhí)行的次數(shù)是3次，這是因?yàn)槭录趫?zhí)行過(guò)程中存在冒泡現(xiàn)象，即雖然單擊的是按鈕，但按鈕外圍的<div>元素的事件也被觸發(fā)，同時(shí)<div>元素外圍的<body>元素的事件也被觸發(fā)，整個(gè)過(guò)程為冒泡過(guò)程。如何阻止冒泡過(guò)程的發(fā)生，可以通過(guò)stopPropagation()方法或return false來(lái)實(shí)現(xiàn)，修改代碼為：
<script type="text/javascript">
$(function(){
var intI=0;
$("body,div,#btnShow").click(function(event){
intI++;
$(".clsShow").show().html("您好，歡迎來(lái)到JQuery世界！").append("<div>執(zhí)行次數(shù)"+intI+"</div>");
//event.stopPropagation(); 阻止冒泡過(guò)程
return false;
})
});
</script>
效果圖如：
點(diǎn)擊后
相關(guān)文章
也許有時(shí)你需要在網(wǎng)站上播放一些音頻和視頻文件，也許你正在建立一個(gè)在線社區(qū)需要有分享和播放音樂(lè)和視頻的功能。下面介紹的這些免費(fèi)jQuery插件也許有你需要的。2014-11-11
關(guān)于jquery form表單序列化的注意事項(xiàng)詳解
一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
jquery 動(dòng)態(tài)增加刪除行的簡(jiǎn)單實(shí)例(推薦)
jquery插件bootstrapValidator表單驗(yàn)證詳解
jQuery實(shí)現(xiàn)的簡(jiǎn)單手風(fēng)琴效果示例
