事件的綁定和解綁 (jQuery)

1on()的多事件綁定

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

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

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

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

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

多個事件綁定同一個函數

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

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

多個事件綁定不同函數

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

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

將數據傳遞到處理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕課網
}
$( "button" ).on( "click", {
  name: "慕課網"
}, greet );

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

 

以上都是on方法基本用法

2on()的高級用法

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

委托機制

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

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

參考下面3層結構

<div class="left">
    <p class="aaron">
        <a>目標節點</a> //點擊在這個元素上
    </p>
</div>

給出如下代碼：

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

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

3卸載事件off()方法

• 通過.on()綁定的事件處理程序
• 通過off() 方法移除該綁定

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

綁定2個事件

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

刪除一個事件

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

刪除所有事件

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

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

$("elem").off()