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 　　　　else7 　　　　　　$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()方法。

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

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