快捷導(dǎo)航

jquery入門(mén)——事件機(jī)制之事件中的冒泡現(xiàn)象示例解釋

更新時(shí)間：2020年09月12日 14:28:36 投稿：whsnow

事件被觸發(fā)后被分為兩個(gè)階段，一個(gè)是捕獲（Capture），另一個(gè)是冒泡(Bubbing)，但大多瀏覽器并不是都支持捕獲階段，因此事件被觸發(fā)后，往往執(zhí)行冒泡過(guò)程,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)事件機(jī)制有所幫助

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、示例代碼：

復(fù)制代碼代碼如下:

<!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)，修改代碼為：

復(fù)制代碼代碼如下:

<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)擊后