JQurey入門――事件機制之事件中的冒泡現象示例解釋

2019-11-20 23:00:08

字體：大中小

來源：轉載

供稿：網友

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

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>事件中的冒泡現象</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>執行次數"+intI+"</div>"); 
}) 
}); 
</script> 
</head> 
<body> 
<div> 
<input id ="btnShow" type="button" value ="點擊" class ="btn"/> 
</div> 
<div class ="clsShow"></div> 
</body> 
</html> 

3、效果圖預覽：

點擊后：

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

復制代碼代碼如下:

<script type="text/javascript"> 
$(function(){ 
var intI=0; 
$("body,div,#btnShow").click(function(event){ 
intI++; 
$(".clsShow").show().html("您好，歡迎來到JQuery世界！").append("<div>執行次數"+intI+"</div>"); 
//event.stopPropagation(); 阻止冒泡過程 
return false; 
}) 
}); 
</script>

效果圖如：

點擊后