第79天：jQuery事件總結（二）

       上一篇講到jQuery中的事件，深入學習了加載DOM和事件綁定的相關知識，這篇主要深入讨論jQuery事件中的合成事件、事件冒泡和事件移除等内容。

　　一、合成事件

　　jQuery有兩個合成事件——hover()方法和toggle()方法，同ready()方法一樣，這些都是jQuery自定義的方法。

　　hover()方法：hover()方法的文法結構為：

hover(enter, leave);      

hover()方法用于模拟滑鼠懸停事件。當滑鼠移動到元素上時，會觸發指定的第一個函數（enter）；當滑鼠移出這個元素時，會觸發指定的第二個函數（leave）。

　　上篇中有一個例子是這樣寫的：

1 $(function(){
2     $("#container h4.head").bind("mouseover", function(){
3       $(this).next().show();    //擷取并顯示“内容”元素
4     }).bind("mouseout", function(){
5       $(this).next().hide();
6     });
7   })      

可以将這個例子改寫成以下的jQuery代碼：

1 $(function(){
2     $("#container h4.head").hover(function(){
3       $(this).next().show();    //擷取并顯示“内容”元素
4     }, function(){
5       $(this).next().hide();
6     });
7   })      

上述兩種寫法的代碼的運作效果是一緻的。

　　*這裡要注意的一點是，jQuery的hover()方法準确來說是替代jQUery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")，那麼這兩對綁定函數，其實是兩對事件是什麼差別呢？解析如下：

　　mouseover與mouseenter

　　不論滑鼠指針穿過被選元素或其子元素，都會觸發 mouseover 事件。

　　隻有在滑鼠指針穿過被選元素時，才會觸發 mouseenter 事件。

　　mouseout與mouseleave

　　不論滑鼠指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。

　　隻有在滑鼠指針離開被選元素時，才會觸發 mouseleave 事件。

　　簡單的說，mouseover和mouseout會引起觸發的區域更大，mouseenter和mouseleave隻能針對綁定的元素來觸發。

　　toggle()方法：toggle()方法的文法結構為：

toggle(fn1, fn2, fn3, ...);      

　　toggle()方法用于模拟滑鼠連續單擊事件。每次單擊元素，依次觸發指定的相應的函數，直到最後一個。随後的每次單擊都重複對這幾個函數的輪番調用。

　　上篇有過下面的一個例子，在其中如果要連續單擊“标題”連結，實作“内容”隐藏和顯示的效果，那麼按照之前的做法就需要在綁定“click”事件的時候判斷目前的“内容”部分是隐藏還是顯示，然後進行相反的操作，顯然就麻煩的多。

1 $(function(){
2     $("#container h4.head").bind("click", function(){
3        var $content = $(this).next();
4 　　　　if($content.is(":visible"))
5 　　　　　　$content.hide();
6 　　　　else
7 　　　　　　$content.show();
8     }
9   })      

但是這種方式顯然麻煩的多，不是最合适的。再看這個需求，剛好就很适合使用toggle()方法。使用toggle()方法改寫上面的例子如下：

1 $(function(){
2   $("#container h4.head").toggle(function(){
3     $(this).next().show();
4   },  function(){
5     $(this).next().hide()
6   })
7 })      

2、事件冒泡：

在頁面上可以有多個事件，也可以多個元素相應同一個事件，就像上面介紹的那兩對事件一樣。再比如，假設網頁上有兩個元素，一個元素A嵌套在另一個元素B中，并且都被綁定了click事件，同時body元素上也綁定了click事件。那麼在單擊子元素A的時候，會依次觸發三個click事件；單擊元素B的時候，會依次觸發兩個click事件。

　　就上面的簡單描述，已經可以看出問題所在了，那就是會出現意想不到的click事件，是以需要對事件作用範圍進行限制。

　　jQuery有三種辦法可以解決事件冒泡導緻的問題。

　　1、事件對象：也就是之前介紹過的使用bind()方法，例如：

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

上面代碼中，當單擊element元素時，事件對象就被建立了。這個事件對象隻有事件處理函數才能通路到。事件處理函數執行完畢後，事件對象就被銷毀。

　　2、停止事件冒泡：停止事件冒泡可以阻止事件中其他對象的事件處理函數被執行。在jQuery中提供了stopPropagation()方法來停止事件冒泡。

$("element").bind("click", function(event){  //event:事件對象
  //code...
　//code...
  event.stopPropagation();    //停止事件冒泡
})      

阻止預設行為：與上面的stopPropagation()方法相似，jQuery也提供了preventDefault()方法來阻止元素的預設行為。

　　三、移除事件：

在綁定事件的過程中，不僅可以為同一個元素綁定多個事件，也可以為多個元素綁定同一個事件。

　　是以，移除事件就涉及兩種情況下的移出，一種是移除之前注冊的所有事件，二是移除其中的一個事件。以一個按鈕為例：假設網頁中有一個id為btn的按鈕，其上綁定了幾個click事件。那麼：

　　首先添加一個移除事件的按鈕：

<button id="delAll">移除所有事件</button>      

然後可以為該按鈕綁定若幹的click事件，使用鍊式操作就可以很簡單的為其綁定幾個click事件。

　　最後就是編寫用于移除所有click事件的處理函數了。jQuery代碼如下：

$("#delAll").click(function(){
  $('#btn').unbind("click");
})      

因為元素綁定的都是click事件，是以上面不寫“click”參數也可以達到相同的效果。

　　是以可以看出unbind()方法的文法結構：

unbind([type], [data]);      

　其中，第一個參數是事件類型，第二個參數是将要移除的函數。顯然移除元素上的所有事件是使用沒有第二個參數的unbind()方法。

　　如果沒有第一個參數，則移除所有綁定的事件；否則隻删除該類型的事件。

　　如果傳入了第二個參數，則隻有這個特定的事件處理函數會被删除。這正是移除元素的某一個事件的方法。

外面的世界那麼浮躁，我隻想要一塊鍵盤，安靜下來，奏出精彩的代碼篇章。