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

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

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

1、當用戶瀏覽頁面時，瀏覽器會對頁面代碼進行解釋或編譯——這個過程實質(zhì)上是通過事件來驅(qū)動的，即頁面在加載時，執(zhí)行一個Load事件，在這個事件中實現(xiàn)瀏覽器編譯頁面代碼的過程。事件被觸發(fā)后被分為兩個階段，一個是捕獲（Capture），另一個是冒泡(Bubbing)，但大多瀏覽器并不是都支持捕獲階段，因此事件被觸發(fā)后，往往執(zhí)行冒泡過程。

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("您好，歡迎來到JQuery世界！").append("<div>執(zhí)行次數(shù)"+intI+"</div>"); 

}) 

}); 

</script> 

</head> 

<body> 

<div> 

<input id ="btnShow" type="button" value ="點擊" class ="btn"/> 

</div> 

<div class ="clsShow"></div> 

</body> 

</html>

3、效果圖預覽：

點擊后：

點擊一次后，顯示執(zhí)行的次數(shù)是3次，這是因為事件在執(zhí)行過程中存在冒泡現(xiàn)象，即雖然單擊的是按鈕，但按鈕外圍的<div>元素的事件也被觸發(fā)，同時<div>元素外圍的<body>元素的事件也被觸發(fā)，整個過程為冒泡過程。如何阻止冒泡過程的發(fā)生，可以通過stopPropagation()方法或return false來實現(xiàn)，修改代碼為：

復制代碼代碼如下:

<script type="text/javascript"> 

$(function(){ 

var intI=0; 

$("body,div,#btnShow").click(function(event){ 

intI++; 

$(".clsShow").show().html("您好，歡迎來到JQuery世界！").append("<div>執(zhí)行次數(shù)"+intI+"</div>"); 

//event.stopPropagation(); 阻止冒泡過程 

return false; 

}) 

}); 

</script>

效果圖如：

點擊后