DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQurey入門——事件機制之事件中的冒泡現象示例解釋
JQurey入門——事件機制之事件中的冒泡現象示例解釋
編輯:JQuery特效代碼     

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>

效果圖如:

點擊後

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved