詳細講解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>

我們為dc6dce4a544fdca2df29d5ac0ea9906b中的所有e388a4556c0f65e1904146cc1a846bee元素綁定點擊事件：

//为div中的所有p元素的click事件绑定事件处理函数
//只有n2、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事件绑定事件处理函数
//只有n2、n3可以触发该事件
$("div p").bind("click", function(event){
    alert( $(this).text() );
});
// 新添加的n6不会触发上述click事件
$("#n1").append(&#39;<p id="n6">上述绑定的click事件不会对该元素也生效!</p>&#39;);

參數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 );

以上是詳細講解jQuery.bind() 函數用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！