Jquery之on()綁定事件和off()解除綁定事件

一.前言

　　on()和off()都是Jquery1.7新增的函數。

　　on()函數用於為指定元素的一個或多個事件綁定處理函數。off()函數用於移除元素上綁定的一個或多個事件的處理函數，這里主要用於處理使用on()函數綁定的事件。

二.on()

//用法一
jQueryObject.on(events[, selector][, data], handler)
//用法二
jQueryObject.on(eventsMap[, selector][, data])

//---參數說明
//events
String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
//eventsMap
Object類型一個Object對象，其每個屬性對應事件類型和可選的命名空間(參數events) ，屬性值對應綁定的事件處理函數(參數handler) 。
//selector
可選 / String類型一個jQuery選擇器，用於指定哪些后代元素可以觸發綁定的事件。如果該參數為null或被省略，則表示當前元素自身綁定事件(實際觸發者也可能是后代元素，只要事件流能到達當前元素即可) 。
//data
可選 / 任意類型觸發事件時，需要通過event.data傳遞給事件處理函數的任意數據。
//handler
Function類型指定的事件處理函數。

//返回值
on()函數的返回值為jQuery類型，返回當前jQuery對象本身。

三.off()

//用法一
jQueryObject.off([events[, selector][, handler]])
//用法二
jQueryObject.off(eventsMap[, selector])

//---參數說明
//events
可選 / String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
//eventsMap
Object類型一個Object對象，其每個屬性對應事件類型和可選的命名空間(參數events) ，屬性值對應綁定的事件處理函數(參數handler) 。
//selector
可選 / String類型一個jQuery選擇器，用於指定哪些后代元素可以觸發綁定的事件。如果該參數為null或被省略，則表示當前元素自身綁定事件(實際觸發者也可能是后代元素，只要事件流能到達當前元素即可) 。
//handler
可選 / Function類型指定的事件處理函數。

//返回值
off()函數的返回值為jQuery類型，返回當前jQuery對象本身。

四.例子

<div id="all">
    <input id="btn1" type="button" value="點擊1" />
    <input id="btn2" type="button" value="點擊2" />
</div>

// 給按鈕1綁定點擊
//方式1
$("#all").on("click", "#btn1", btnClick1);
////方式2
//$("#btn1").on("click", btnClick1);

// 給按鈕2綁定點擊
//方式1
$("#all").on("click", "#btn2", btnClick2);
////方式2
//$("#btn2").on("click", btnClick2);

function btnClick1() {
    alert("111");
    //解除綁定
    $("#all").off("click", "#btn1");
    //$("#btn1").off("click");
}

function btnClick2() {
    alert("222");
}

　　綁定了按鈕的點擊事件。按鈕1在點擊后解除了綁定事件，再次點擊后，事件就不生效。