JQuery中DOM事件冒泡實例分析_jquery

本文實例分析了JQuery中DOM事件冒泡。分享給大家供大家參考。具體分析如下：

什麼是冒泡

在頁面上可以有多個事件，也可以多個元素回應同一個事件。假設網頁上有兩個元素，其中一個元素嵌套在另一個元素裡，而且都被綁定了click事件，同時body元素上也綁定了click事件。

<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>

<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
   var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

當點選內部span元素，即觸發span元素的click事件時，會輸出3筆記錄。只點擊內部span元素，就會觸發外部div元素和body元素上綁定的click事件。這是由事件冒泡引起的。在點選span元素的同時，也點選了包含span元素的元素div和包含div元素的元素body，並且每個元素都會依照特定的順序回應click事件。

元素的click事件會依照以下順序「冒泡」。

1.
2.

3.

之所以稱為冒泡，是因為事件會按照DOM的層次結構像水泡一樣不斷向上直至頂端。

事件冒泡引發的問題

事件冒泡可能會引起預料以外的效果。上例中，原本只想觸發元素的click事件，然而

元素和元素的click事件也同時被觸發了。因此，有必要對事件的作用範圍進行限制。當點選元素時，只觸發元素的click事件，而不觸發

元素和元素的click事件：當點選

元素時，只觸發

元素的click事件，而不觸發元素的click事件。

事件物件

由於IE-DOM和標準DOM實現事件物件的方法各不相同，導致在不同瀏覽器中取得事件物件變得比較困難。針對這個問題，JQuery進行了必要的擴充和封裝，這使得在任何瀏覽器中都能輕鬆取得事件物件以及事件物件的一些屬性。

在程式中使用事件物件非常簡單，只需要為函數新增一個參數，jQuery程式碼如下：

$("element").bind("click",function(event){ 
  //event : 事件对象 
  //... 
});

這樣，當點選「element」元素時，事件物件就被建立了。這個事件物件只有事件處理函數才能存取。事件處理函數執行完畢後，事件物件就被銷毀。

停止事件冒泡

停止事件冒泡可以阻止事件中其他物件的事件處理函數被執行。在JQuery中提供了stopPropagation()方法來停止事件冒泡。

$(function(){
   // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "内层span元素被点击";
    $('#msg').html(txt);
    event.stopPropagation(); // 阻止事件冒泡
  });
})

當點選元素時，只會觸發元素上的click事件，而不會觸發

元素和元素的click事件。可以用同樣的方法解決

元素上的冒泡問題。

$('#content').bind("click",function(event){ 
 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; 
 $('#msg').html(txt); 
 event.stopPropagation(); // 阻止事件冒泡 
});

這樣，當點選元素或

元素時，就只會輸出對應的內容，而不會輸出其他的內容。

阻止預設行為

網頁中的元素有自己預設的行為，例如，點擊超連結後會跳轉、點擊「提交」按鈕後表單會提交，有時需要阻止元素的預設行為。

在JQuery中，提供了preventDefault()方法來阻止元素的預設行為。

舉一個例子，在項目中，經常需要驗證表單，在單擊“提交”按鈕時，驗證表單內容，例如某元素是否是必填字段，某元素長度是否夠6位等，當表單不符合提交條件時，要封鎖表單的提交（預設行為）。

<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})

當使用者名為空時，按一下「提交」按鈕，會出現提示，表單不能提交。只有在使用者名稱輸入內容後，才能提交表單。可見，preventDefault()方法能阻止表單的提交行為。

如果想同時對事件物件停止冒泡和預設行為，可以在事件處理函數中返同false。這是對在事件物件上同時呼叫stopPrapagation()方法和preventDefault()方法的一種簡寫方式。

在表單的例子中，可以把 event.preventDefault(); 改寫為： return false;

也可以把事件冒泡範例中的 event.stopPropaqation(); 改寫為： return false;

事件捕獲

事件擷取和事件冒泡是剛好相反的兩個過程，事件擷取是從最頂端往下開始觸發。還是冒泡事件的例子，其中元素的click事件會依照以下順序捕捉。

1.

2.

3.

很顯然，事件捕獲是從最外層元素開始，然後再到最裡層元素。因此綁定的click事件，首先會傳遞給

元素，然後傳遞給

元素，最後才傳遞給元素。

遺憾的是，並非所有主流瀏覽器都支援事件捕獲，而這個缺陷無法透過JavaScript來修復。 JQuery不交持事件捕獲，如果讀者需要使用事件捕獲，請直接使用原生的JavaScript。

希望本文所述對大家的jQuery程式設計有所幫助。