jQuery.bind() 函數詳解

bind()函數用於爲每一個匹配元素的一個或多個事件綁定事件處理函數。

此外，你還能夠額外傳遞給事件處理函數一些所需的數據。

執行bind()時，事件處理函數會綁定到每一個匹配元素上。所以你使用bind()全部button元素綁定了click事件，是爲當時文檔中存在的每一個button元素綁定click事件。若是以後你向文檔中添加了新的button元素，綁定事件不會對其生效。若是你但願綁定事件對將來新添加的元素也生效，請使用on()、delegate()、live()等事件函數(儘可能優先使用靠前的事件函數)。

此外，你能夠爲同一元素、同一事件類型綁定多個事件處理函數。觸發事件時，jQuery會按照綁定的前後順序依次執行綁定的事件處理函數。

要刪除經過bind()綁定的事件，請使用unbind()函數。

該函數屬於jQuery對象(實例)。

語法

bind()函數主要有如下兩種形式的用法：

用法一：

jQueryObject.bind( events [, data ], handler )

用法二：jQuery 1.4.3 新增支持該用法。

jQueryObject.bind( events [, data ] [, isDefaultBubble ] )

用法三：jQuery 1.4 新增支持該用法。

jQueryObject.bind( eventsMap )

參數

參數	描述
events	String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
data	可選/任意類型觸發事件時，須要經過event.data傳遞給事件處理函數的任意數據。
handler	Function類型指定的事件處理函數。
isDefaultBubble	可選/Boolean類型指定觸發事件時，是否容許元素的默認行爲和事件冒泡。默認爲true。
eventsMap	Object類型一個Object對象，其每一個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler)。

關於參數events中可選的命名空間(1.4.3+才支持)，請參考最下面的示例代碼。

參數handler中的this指向當前DOM元素。bind()還會爲handler傳入一個參數：表示當前事件的Event對象。

參數handler的返回值與DOM原生事件的處理函數返回值做用一致。例如submit(表單提交)事件的事件處理函數返回false，能夠阻止表單的提交。

參數isDefaultBubble用於指示是否容許元素的默認行爲和事件冒泡。若是該值爲false，它將阻止元素的默認行爲(例如：觸發click事件的連接的默認跳轉行爲，觸發submit事件的表單的默認提交行爲)和事件的冒泡傳遞。

返回值

bind()函數的返回值爲jQuery類型，返回當前jQuery對象自己。

示例&說明

以點擊事件("click")爲例，如下是jQuery中事件函數的常規用法(某些函數也存在其它形式的用法，此處暫不列出)：

// 這裏的選擇器selector用於指定能夠觸發事件的元素
// 這裏的選擇器ancestor應是selector的祖輩元素，selector觸發的事件能夠被其祖輩元素在事件流中捕獲，從而以"委託代理"的形式觸發事件。

// jQuery 1.0+ (1.4.3+支持參數data)
$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支持參數data)
$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支持參數data)
$("selector").live( "click" [, data ], handler );

// jQuery 1.4.2+
$("ancestor").delegate( "selector", "click" [, data ], handler );

// jQuery 1.7+
$("ancestor").on( "click", "selector" [, data ], handler );

請參考下面這段初始HTML代碼：

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>專一於編程開發技術分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

咱們爲<div>中的全部<p>元素綁定點擊事件：

//爲div中的全部p元素的click事件綁定事件處理函數
//只有n二、n3能夠觸發該事件
$("div p").bind("click", function(){
// 這裏的this指向觸發點擊事件的p元素(Element)
    alert( $(this).text() );
});

運行代碼(如下代碼請自行復制到演示頁面運行)

此外，咱們還能夠同時綁定多個事件，併爲事件處理函數傳遞一些附加的數據，咱們能夠經過jQuery爲事件處理函數傳入的參數event(Event事件對象)來進行處理：

var obj = { id: 5, name: "王五" };

//爲n5綁定mouseenter mouseleave兩個事件，併爲其傳入附加數據obj
// 附加數據能夠是任意類型
$("#n5").bind("mouseenter mouseleave", obj, function(event){
    var $me = $(this);
    var obj = event.data; // 這就是傳入的附加數據
    if( event.type == "mouseenter"){
        $me.html( "你好，" + obj.name + "!");
    }else if(event.type == "mouseleave" ){
        $me.html( "再見，" + obj.name + "!");      
    }           
} );

此外，若是符合條件的元素是bind()函數執行後新添加的，綁定事件不會對其生效。一樣以初始HTML代碼爲例，咱們能夠編寫以下jQuery代碼：

//爲div中的全部p元素的click事件綁定事件處理函數
//只有n二、n3能夠觸發該事件
$("div p").bind("click", function(event){
    alert( $(this).text() );
});

// 新添加的n6不會觸發上述click事件
$("#n1").append('<p id="n6">上述綁定的click事件不會對該元素也生效!</p>');

參數events還支持爲事件類型附加額外的命名空間。當爲同一元素綁定多個相同類型的事件處理函數時。使用命名空間，能夠在觸發事件、移除事件時限定觸發或移除的範圍。

function clickHandler(event){
    alert( "觸發時的命名空間:[" + event.namespace + "]");
}

var $p = $("p");

// A：爲全部p元素綁定click事件，定義在foo和bar兩個命名空間下
$p.bind( "click.foo.bar", clickHandler );

// B：爲全部p元素綁定click事件，定義在test命名空間下
$p.bind( "click.test", clickHandler );

var $n2 = $("#n2");

// 觸發全部click事件
$n2.trigger("click"); // 觸發A和B (event.namespace = "")

// 觸發定義在foo命名空間下的click事件
$n2.trigger("click.foo"); // 觸發A (event.namespace = "foo")
// 觸發定義在bar命名空間下的click事件
$n2.trigger("click.bar"); // 觸發A (event.namespace = "bar")
// 觸發同時定義在foo和bar兩個命名空間下的click事件
$n2.trigger("click.foo.bar"); // 觸發A (event.namespace = "bar.foo")

// 觸發定義在test命名空間下的click事件
$n2.trigger("click.test"); // 觸發B (event.namespace = "test")

bind()函數的參數eventsMap是一個對象，能夠"屬性-值"的方式指定多個"事件類型-處理函數"。對應的示例代碼以下：

var eventsMap = {
    "mouseenter": function(event){
        $(this).html( "Hello!");        
    },
    
    "mouseleave": function(event){
        $(this).html( "Bye!");
    }
};

//爲n5綁定mouseenter mouseleave兩個事件
$("#n5").bind( eventsMap );