事件的綁定和解綁 (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()