事件的綁定與解綁

1. on()的多事件綁定

之前學的滑鼠事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理。翻開源碼其實可以看到，所有的快捷事件在底層的處理都是通過一個"on"方法來實作的。jQuery on()方法是官方推薦的綁定事件的一個方法。

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

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

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

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

最大的不同點就是on是可以自定義事件名。

多個事件綁定同一個函數

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

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

多個事件綁定不同函數

$("#elem").on({

   mouseover:function(){}, 

    mouseout:function(){},

});

通過空格分離，傳遞不同的事件名，可以同時綁定多個事件，每一個事件執行自己的回調方法。

将資料傳遞到處理程式

function greet( event ) {

  alert( "Hello " +event.data.name ); //Hello 慕課網

}

$( "button" ).on( "click", {

  name: "慕課網"

}, greet );

可以通過第二參數（對象），當一個事件被觸發時，要傳遞給事件處理函數的。

2. on()的進階用法

針對自己處理機制中，不僅有on方法，還有根據on演變出來的live方法，delegate方法等等。這些方法的底層實作部分還是on方法，這是利用了on的另一個事件機制委托的機制衍變而來的。

委托機制

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

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

參考下面3層結構：

<div class="left">

    <pclass="aaron">

        <a>目标節點</a>//點選在這個元素上

    </p>

</div>

給出如下代碼：

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

事件綁定在最上層div元素上，當使用者觸發在a元素上，事件将往上冒泡，一直會冒泡到div元素上。如果提供了第二參數，那麼事件在往上冒泡的過程中遇到了選擇器比對的元素，将會觸發事件回調函數。

3. 解除安裝事件off()方法

（1）通過.on()綁定的事件處理程式

（2）通過off() 方法移除該綁定

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

綁定2個事件

$("elem").on("mousedownmouseup",fn)

删除一個事件

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

删除所有事件

$("elem").off("mousedownmouseup")

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

$("elem").off()

附：以上内容整理自慕課網