<span style='font-size: 14px; font-family: 微軟雅黑, "Microsoft YaHei";'> I believe that many friends who have come into contact with jQuery are familiar with the bind() function, but many friends are still not very clear about the meaning and use of bind(), bind()</span> The function is used to bind one or more events for each matching element. Event processing function. Today we will introduce you to the detailed explanation of the bind() function in jQuery!

In addition, you can also pass some additional required data to the event handling function.

When bind() is executed, the event handler function will be bound to each matching element. Therefore, you use bind() to bind click events to all button elements. This is to bind click events to each button element that exists in the document at that time. If you later add a new button element to the document, the bound event will not take effect on it. If you want the binding event to also take effect on newly added elements in the future, please use event functions such as on(), delegate(), live() (try to use the earlier event functions first).

In addition, you can bind multiple event handlers to the same element and the same event type. When an event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via bind(), use the unbind() function.

This function belongs to the jQuery object (instance).

Grammar

bind()The function mainly has the following two forms of usage:

Usage 1:

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

Usage 2: jQuery 1.4.3 newly supports this usage.

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

Usage three: jQuery 1.4 newly supports this usage.

jQueryObject.bind( eventsMap )

Parameters

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

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

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

參數(shù)isDefaultBubble用于指示是否允許元素的默認行為和事件冒泡。如果該值為false，它將阻止元素的默認行為(例如：觸發(fā)click事件的鏈接的默認跳轉(zhuǎn)行為，觸發(fā)submit事件的表單的默認提交行為)和事件的冒泡傳遞。

返回值

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

示例&說明

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

<span class="com">// 這里的選擇器selector用于指定可以觸發(fā)事件的元素<span class="pln"><br/>// 這里的選擇器ancestor應(yīng)是selector的祖輩元素，selector觸發(fā)的事件可以被其祖輩元素在事件流中捕獲，從而以"委托代理"的形式觸發(fā)事件。<span class="pln"><br/><br/>// jQuery 1.0+ (1.4.3+支持參數(shù)data)<span class="pln"><br/>$<span class="pun">(<span class="str">"selector"<span class="pun">).<span class="pln">click<span class="pun">(<span class="pln"> <span class="pun">[<span class="pln"> data <span class="pun">,]<span class="pln"> handler <span class="pun">);<span class="pln"><br/><br/>// jQuery 1.0+ (1.4.3+支持參數(shù)data)<span class="pln"><br/>$<span class="pun">(<span class="str">"selector"<span class="pun">).<span class="pln">bind<span class="pun">(<span class="pln"> <span class="str">"click"<span class="pln"> <span class="pun">[,<span class="pln"> data <span class="pun">],<span class="pln"> handler <span class="pun">);<span class="pln"><br/><br/>// jQuery 1.3+ (1.4+支持參數(shù)data)<span class="pln"><br/>$<span class="pun">(<span class="str">"selector"<span class="pun">).<span class="pln">live<span class="pun">(<span class="pln"> <span class="str">"click"<span class="pln"> <span class="pun">[,<span class="pln"> data <span class="pun">],<span class="pln"> handler <span class="pun">);<span class="pln"><br/><br/>// jQuery 1.4.2+<span class="pln"><br/>$<span class="pun">(<span class="str">"ancestor"<span class="pun">).<span class="pln">delegate<span class="pun">(<span class="pln"> <span class="str">"selector"<span class="pun">,<span class="pln"> <span class="str">"click"<span class="pln"> <span class="pun">[,<span class="pln"> data <span class="pun">],<span class="pln"> handler <span class="pun">);<span class="pln"><br/><br/>// jQuery 1.7+<span class="pln"><br/>$<span class="pun">(<span class="str">"ancestor"<span class="pun">).<span class="pln">on<span class="pun">(<span class="pln"> <span class="str">"click"<span class="pun">,<span class="pln"> <span class="str">"selector"<span class="pln"> <span class="pun">[,<span class="pln"> data <span class="pun">],<span class="pln"> handler <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

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

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span><span class="pln">CodePlayer<span class="tag"></span></p><span class="pln"><br/>    <span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span><span class="pln">專注于編程開發(fā)技術(shù)分享<span class="tag"></span></p><span class="pln"><br/>    <span class="tag"><em<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">http://www.365mini.com<span class="tag"></em><span class="pln"><br/></p><span class="pln"><br/><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">Google<span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

我們?yōu)?p>中的所有

元素綁定點擊事件：

<span class="com">//為p中的所有p元素的click事件綁定事件處理函數(shù)<span class="pln"><br/>//只有n2、n3可以觸發(fā)該事件<span class="pln"><br/>$<span class="pun">(<span class="str">"p p"<span class="pun">).<span class="pln">bind<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(){<span class="pln"><br/>// 這里的this指向觸發(fā)點擊事件的p元素(Element)<span class="pln"><br/>    alert<span class="pun">(<span class="pln"> $<span class="pun">(<span class="kwd">this<span class="pun">).<span class="pln">text<span class="pun">()<span class="pln"> <span class="pun">);<span class="pln"><br/>});</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

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

此外，我們還可以同時綁定多個事件，并為事件處理函數(shù)傳遞一些附加的數(shù)據(jù)，我們可以通過jQuery為事件處理函數(shù)傳入的參數(shù)event(Event事件對象)來進行處理：

<span class="kwd">var<span class="pln"> obj <span class="pun">=<span class="pln"> <span class="pun">{<span class="pln"> id<span class="pun">:<span class="pln"> <span class="lit">5<span class="pun">,<span class="pln"> name<span class="pun">:<span class="pln"> <span class="str">"王五"<span class="pln"> <span class="pun">};<span class="pln"><br/><br/>//為n5綁定mouseenter mouseleave兩個事件，并為其傳入附加數(shù)據(jù)obj<span class="pln"><br/>// 附加數(shù)據(jù)可以是任意類型<span class="pln"><br/>$<span class="pun">(<span class="str">"#n5"<span class="pun">).<span class="pln">bind<span class="pun">(<span class="str">"mouseenter mouseleave"<span class="pun">,<span class="pln"> obj<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    <span class="kwd">var<span class="pln"> $me <span class="pun">=<span class="pln"> $<span class="pun">(<span class="kwd">this<span class="pun">);<span class="pln"><br/>    <span class="kwd">var<span class="pln"> obj <span class="pun">=<span class="pln"> event<span class="pun">.<span class="pln">data<span class="pun">;<span class="pln"> <span class="com">// 這就是傳入的附加數(shù)據(jù)<span class="pln"><br/>    <span class="kwd">if<span class="pun">(<span class="pln"> event<span class="pun">.<span class="pln">type <span class="pun">==<span class="pln"> <span class="str">"mouseenter"<span class="pun">){<span class="pln"><br/>        $me<span class="pun">.<span class="pln">html<span class="pun">(<span class="pln"> <span class="str">"你好，"<span class="pln"> <span class="pun">+<span class="pln"> obj<span class="pun">.<span class="pln">name <span class="pun">+<span class="pln"> <span class="str">"!"<span class="pun">);<span class="pln"><br/>    <span class="pun">}<span class="kwd">else<span class="pln"> <span class="kwd">if<span class="pun">(<span class="pln">event<span class="pun">.<span class="pln">type <span class="pun">==<span class="pln"> <span class="str">"mouseleave"<span class="pln"> <span class="pun">){<span class="pln"><br/>        $me<span class="pun">.<span class="pln">html<span class="pun">(<span class="pln"> <span class="str">"再見，"<span class="pln"> <span class="pun">+<span class="pln"> obj<span class="pun">.<span class="pln">name <span class="pun">+<span class="pln"> <span class="str">"!"<span class="pun">);<span class="pln">      <br/>    <span class="pun">}<span class="pln">           <br/><span class="pun">}<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

此外，如果符合條件的元素是bind()函數(shù)執(zhí)行后新添加的，綁定事件不會對其生效。同樣以初始HTML代碼為例，我們可以編寫如下jQuery代碼：

<span class="com">//為p中的所有p元素的click事件綁定事件處理函數(shù)<span class="pln"><br/>//只有n2、n3可以觸發(fā)該事件<span class="pln"><br/>$<span class="pun">(<span class="str">"p p"<span class="pun">).<span class="pln">bind<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    alert<span class="pun">(<span class="pln"> $<span class="pun">(<span class="kwd">this<span class="pun">).<span class="pln">text<span class="pun">()<span class="pln"> <span class="pun">);<span class="pln"><br/>});<span class="pln"><br/><br/>// 新添加的n6不會觸發(fā)上述click事件<span class="pln"><br/>$<span class="pun">(<span class="str">"#n1"<span class="pun">).<span class="pln">append<span class="pun">(<span class="str">&#39;<p id="n6">上述綁定的click事件不會對該元素也生效!</p>&#39;<span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

參數(shù)events還支持為事件類型附加額外的命名空間。當為同一元素綁定多個相同類型的事件處理函數(shù)時。使用命名空間，可以在觸發(fā)事件、移除事件時限定觸發(fā)或移除的范圍。

<span class="kwd">function<span class="pln"> clickHandler<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    alert<span class="pun">(<span class="pln"> <span class="str">"觸發(fā)時的命名空間:["<span class="pln"> <span class="pun">+<span class="pln"> event<span class="pun">.<span class="pln">namespace <span class="pun">+<span class="pln"> <span class="str">"]"<span class="pun">);<span class="pln"><br/>}<span class="pln"><br/><br/>var<span class="pln"> $p <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"p"<span class="pun">);<span class="pln"><br/><br/>// A：為所有p元素綁定click事件，定義在foo和bar兩個命名空間下<span class="pln"><br/>$p<span class="pun">.<span class="pln">bind<span class="pun">(<span class="pln"> <span class="str">"click.foo.bar"<span class="pun">,<span class="pln"> clickHandler <span class="pun">);<span class="pln"><br/><br/>// B：為所有p元素綁定click事件，定義在test命名空間下<span class="pln"><br/>$p<span class="pun">.<span class="pln">bind<span class="pun">(<span class="pln"> <span class="str">"click.test"<span class="pun">,<span class="pln"> clickHandler <span class="pun">);<span class="pln"><br/><br/>var<span class="pln"> $n2 <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"#n2"<span class="pun">);<span class="pln"><br/><br/>// 觸發(fā)所有click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click"<span class="pun">);<span class="pln"> <span class="com">// 觸發(fā)A和B (event.namespace = "")<span class="pln"><br/><br/>// 觸發(fā)定義在foo命名空間下的click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click.foo"<span class="pun">);<span class="pln"> <span class="com">// 觸發(fā)A (event.namespace = "foo")<span class="pln"><br/>// 觸發(fā)定義在bar命名空間下的click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click.bar"<span class="pun">);<span class="pln"> <span class="com">// 觸發(fā)A (event.namespace = "bar")<span class="pln"><br/>// 觸發(fā)同時定義在foo和bar兩個命名空間下的click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click.foo.bar"<span class="pun">);<span class="pln"> <span class="com">// 觸發(fā)A (event.namespace = "bar.foo")<span class="pln"><br/><br/>// 觸發(fā)定義在test命名空間下的click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click.test"<span class="pun">);<span class="pln"> <span class="com">// 觸發(fā)B (event.namespace = "test")</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

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

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

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

總結(jié)：

本文使用示例代碼詳細的為大家分析了jQuery中關(guān)于bind()函數(shù)，相信大家對此也是有了進一步的了解，希望對你的工作有所幫助！

相關(guān)推薦：

Js的this指向 apply().call(),bind()的問題

帶你了解JQuery中綁定事件（bind()）和移除事件（unbind()）

jQuery中 trigger() &?bind()?使用心得

帶你深入了解JQuery中Bind()函數(shù)

The above is the detailed content of Detailed explanation of bind() function in jQuery. For more information, please follow other related articles on the PHP Chinese website!