JQuery中DOM事件綁定用法詳解_jquery

本文實例講述了JQuery中DOM事件綁定用法。分享給大家供大家參考。具體分析如下：

在文件載入完成後，如果打算為元素綁定事件來完成某些操作，則可以使用bind()方法來對匹配元素進行特定事件的綁定，bind()方法的呼叫格式為：

bind( 型 [, data] , fn);

bind()方法有3個參數，說明如下。

第1個參數是事件類型，類型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、 keydown、keypress、keyup和error等，當然也可以是自訂名稱。
第2個參數為可選參數，作為event.data屬性值傳遞給事件物件的額外資料物件。
第3個參數則是用米綁定的處理函數。

可以發現，jQuery中的事件綁定類型比普通的JavaScript事件綁定類型少了「on」。例如滑鼠點選事件在jQuer中對應的是click事件，而在JavaScript中對應的是onclick()函數。

依照需求，需要完成以下步驟。

1. 等待DOM載入完畢。
2. 找到「標題」所在的元素，綁定click事件。
3. 找到「內容」元素，將「內容」元素顯示。

$(function(){
 $("#panel h5.head").bind("click",function(){
   var $content = $(this).next();
   if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})

與ready()方法一樣，bind()方法也可以多次呼叫。

上面jQuery程式碼中有一個關鍵字this，與在JavaScript中的作用一樣，this引用的是攜帶對應行為的DOM元素。為了使該DOM元素能夠使用jQuery中的方法，可以使用$(this)將其轉換為jQuery物件。

為了判斷元素是否顯示，可以使用jQuery中的is()方法來完成。在程式碼中，發現$(this).next("div.content")被多次使用，因此可以為它定義一個局部變數：$content。

在上面的範例中，給元素綁定的事件類型是click，當使用者點擊的時候會觸發綁定的事件，然後執行事件的函數程式碼。現在把事件類型換成mouseover和mouseout，也就是當遊標滑過的時候，就觸發事件。需要進行以下幾步操作。

1. 等待DOM載入完畢。
2. 找到「標題」所在的元素，綁定mouseover事件。
3. 找到「內容」元素，顯示「內容」。
4. 找到「標題」所在的元素，綁定mouseout事件。
5. 找到「內容」元素，隱藏「內容」。

程式碼運行後，當遊標滑過「標題」連結後，對應的「內容」將會被顯示。當遊標滑出「標題」連結後，對應的「內容」則被隱藏。

程式碼如下：

$(function(){ 
 $("#panel h5.head").bind("mouseover",function(){ 
  $(this).next().show(); 
 }); 
  $("#panel h5.head").bind("mouseout",function(){ 
   $(this).next().hide(); 
 }) 
})

在上面幾個例子中，分別用bind()方法給「標題」綁定了click事件、mouseover事件和mouseout事件，綁定方法都一樣。除此之外，bind0方法還能綁定其他所有的JavaScript事件。

像click、mouseover和mouseout這類事件，在程式中常會使用到，jQuery為此也提供了一套簡寫的方法。簡寫方法和bind()方法的使用類似，實現的效果也相同，惟一的差別是能夠減少程式碼量。

例如把上面的範例改寫成使用簡寫綁定事件的方式，程式碼如下：

$(function(){
 $("#panel2 h5.head").mouseover(function(){
   $(this).next().show();
  });
  $("#panel2 h5.head").mouseout(function(){
    $(this).next().hide();
  })
})

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