事件的繫結和解綁 jQuery

之前學的滑鼠事件，表單事件與鍵盤事件都有個特點，就是直接給元素繫結乙個處理函式，所有這類事件都是屬於快捷處理。翻開原始碼其實可以看到，所有的快捷事件在底層的處理都是通過乙個"on"方法來實現的。jquery on()方法是官方推薦的繫結事件的乙個方法。

基本用法：.on( events ,[ selector ] ,[ data ] )

最常見的給元素繫結乙個點選事件，對比一下快捷方式與on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

最大的不同點就是on是可以自定義事件名，當然不僅僅只是如何，繼續往下看

多個事件繫結同乙個函式

$("#elem").on("mouseover mouseout",function());

通過空格分離，傳遞不同的事件名，可以同時繫結多個事件

多個事件繫結不同函式

$("#elem").on(,  
mouseout:function(){},
});

通過空格分離，傳遞不同的事件名，可以同時繫結多個事件，每乙個事件執行自己的**方法

將資料傳遞到處理程式

function greet( event ) 
$( "button" ).on( "click", , greet );

可以通過第二引數（物件），當乙個事件被觸發時，要傳遞給事件處理函式的

以上都是on方法基本用法

針對自己處理機制中，不僅有on方法，還有根據on演變出來的live方法(1.7後去掉了)，delegate方法等等。這些方法的底層實現部分還是on方法，這是利用了on的另乙個事件機制委託的機制衍變而來的

委託機制

.on( events ,[ selector ] ,[ data ], handler(eventobject) )

在on的第二引數中提供了乙個selector選擇器，簡單的來描述下

參考下面3層結構

目標節點 //點選在這個元素上

給出如下**：

$("div").on("click","p",fn)

事件繫結在最上層div元素上，當使用者觸發在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二引數，那麼事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發事件**函式

根據on繫結事件的一些特性，off方法也可以通過相應的傳遞組合的事件名，名字空間，選擇器或處理函式來移除繫結在元素上指定的事件處理函式。當有多個過濾引數時，只有與這些引數完全匹配的事件處理函式才會被移除

繫結2個事件

$("elem").on("mousedown mouseup",fn)

刪除乙個事件

$("elem").off("mousedown")

刪除所有事件

$("elem").off("mousedown mouseup")

快捷方式刪除所有事件，這裡不需要傳遞事件名了，節點上繫結的所有事件講全部銷毀

$("elem").off()