on()函數

從jQuery 1.7開始，on()函數提供了綁定事件處理程序所需的所有功能，用于統一取代以前的bind()、 delegate()、 live()等事件函數。

on()函數用于為指定元素的一個或多個事件綁定事件處理函數。

你還可以額外傳遞給事件處理函數一些所需的數據。

該函數可以為同一元素、同一事件類型綁定多個事件處理函數。觸發事件時，jQuery會按照綁定的先后順序依次執行綁定的事件處理函數。

語法

用法一：

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類型指定的事件處理函數。

參數handler中的this指向當前匹配元素的后代元素中觸發該事件的DOM元素。如果參數selector等于null或被省略，則this指向當前匹配元素(也就是該元素)。
on()還會為handler傳入一個參數：表示當前事件的Event對象。

off()函數
off()函數用于移除元素上綁定的一個或多個事件的事件處理函數。
off()函數主要用于解除由on()函數綁定的事件處理函數。

語法
用法一：

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()函數將會移除當前匹配元素上為后代元素selector綁定的events事件的事件處理函數handler。

如果省略參數selector，則移除為任何元素綁定的事件處理函數。

參數selector必須與通過on()函數添加綁定時傳入的選擇器一致。

如果省略參數handler，則移除指定元素指定事件類型上綁定的所有事件處理函數。

如果省略了所有參數，則表示移除當前元素上為任何元素綁定的任何事件類型的任何事件處理函數。

容易忽略的點：off所解除元素的綁定事件，其中選擇器必須和on綁定事件時所用的選擇器一致。

要刪除通過on()綁定的事件，請使用off()函數。如果要附加一個事件，只執行一次，然后刪除自己，請使用one()函數。

代碼示例

html代碼

<input id="btn1"
type="button" value="點擊1" />

<input id="btn2"
type="button" value="點擊2" />

<a id="a1"
href="#">CodePlayer</a>

頁面加載時執行的jquery代碼

function btnClick1(){

alert( this.value + "-1" );

}

function btnClick2(){

alert( this.value + "-2" );

}

var $body = $("body");

// 給按鈕1綁定點擊

$body.on("click",
"#btn1", btnClick1 );

// 給按鈕2綁定點擊

$body.on("click",
"#btn2", btnClick2 );

//為所有a元素綁定click、mouseover、mouseleave事件

$body.on("click mouseover mouseleave",
"a", function(event){

if(
event.type == "click" ){

$body.off("click", "#btn1");//取消btn1的綁定事件。成功執行

alert("點擊事件");

alert("ddd");

}else if( event.type == "mouseover" ){

$(this).css("color", "red");

}else{

$(this).css("color", "blue");

}

});

// 移除body元素為所有button元素的click事件綁定的事件處理函數btnClick2

// 點擊按鈕，btnClick1照樣執行

$body.off("click",
":button", btnClick2);

// 點擊按鈕1，不會執行任何事件處理函數

// $body.off("click",
"#btn1");

// 注意：
$body.off("click", ":button"); 無法移除btn1的點擊事件，off()函數指定的選擇器必須與on()函數傳入的選擇器一致。

// 移除body元素為所有元素(包括button和<a>元素)的click事件綁定的所有處理函數

// 點擊按鈕或鏈接，都不會觸發執行任何事件處理函數

//
$("body").off("click");

// 移除body元素為所有元素的任何事件綁定的所有處理函數

// 點擊按鈕，或點擊鏈接或者鼠標移入/移出鏈接，都不會觸發執行任何事件處理函數

// $("body").off( );

項目中使用示例

// 往返開關

$("#tick-switch").on("click",
function () {

$(this).parent().toggleClass("active");

$("#end-n-data").toggleClass("on")

//根據選擇的單程/往返決定是否加載返程日期的單擊事件

if
(!$("#end-date").attr("data-choosed")) {

$("#end-date").attr("data-choosed",
"true");

$("#end-date").on("click",
enddateOnCallback);

}

else
{

$("#end-date").removeAttr("data-choosed");

$("#end-date").off("click");

}

});

參考：http://www.jb51.net/article/95723.htm

總結

以上是生活随笔為你收集整理的jquery之on()绑定事件和off()解除绑定事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。