free性欧美1819护士,欧美日韩中文国产一区发布

語法

參數(shù)

返回值

示例&說明

首頁

web前端

js教程

jQuery中關(guān)於??bind()函數(shù)詳解

黃舟

Dec 06, 2017 pm 02:13 PM

bind jquery 詳解

<span style='font-size: 14px; font-family: 微軟雅黑, "Microsoft YaHei";'>相信很多接觸過jQuery的小夥伴對bind()函數(shù)一點(diǎn)都不陌生吧，但是很多小夥伴還不是很清bind()的意義與使用，bind()</span> 函數(shù)用來為每個(gè)符合元素的一個(gè)或多個(gè)事件綁定事件處理函數(shù)、今天我們就帶大家詳細(xì)介紹下jQuery中關(guān)於??bind()函數(shù)詳解！

此外，你還可以額外傳遞給事件處理函數(shù)一些所需的資料。

執(zhí)行bind()時(shí)，事件處理函數(shù)會(huì)綁定到每個(gè)符合元素上。因此你使用bind()所有button元素綁定了click事件，是為當(dāng)時(shí)文件中存在的每個(gè)button元素綁定click事件。如果之後你在文件中加入了新的button元素，綁定事件不會(huì)對其生效。如果你希望綁定事件對未來新加入的元素也生效，請使用on()、delegate()、live()等事件函數(shù)(盡量優(yōu)先使用靠前的事件函數(shù))。

此外，你可以為相同元素、相同事件類型綁定多個(gè)事件處理函數(shù)。觸發(fā)事件時(shí)，jQuery會(huì)依照綁定的先後順序依序執(zhí)行綁定的事件處理函數(shù)。

要?jiǎng)h除透過bind()綁定的事件，請使用unbind()函數(shù)。

該函數(shù)屬於jQuery物件(實(shí)例)。

語法

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

用法一：

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

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

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

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

jQueryObject.bind( eventsMap )

參數(shù)

參數(shù)	描述
#events	String類型一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
data	可選/任意型別觸發(fā)事件時(shí)，需要透過event.data傳遞給事件處理函數(shù)的任意資料。
handler	Function類型指定的事件處理函數(shù)。
isDefaultBubble	可選/Boolean類型指定觸發(fā)事件時(shí)，是否允許元素的預(yù)設(shè)行為和事件冒泡。預(yù)設(shè)為`true`。
eventsMap	Object類型一個(gè)Object物件，其每個(gè)屬性對應(yīng)事件類型和可選的命名空間(參數(shù)`events`)，屬性值對應(yīng)綁定的事件處理函數(shù)(參數(shù)`handler`)。

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

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

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

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

返回值

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

示例&說明

以點(diǎn)擊事件("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>中的所有

元素綁定點(diǎn)擊事件：

<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ā)點(diǎn)擊事件的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>

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

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

<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兩個(gè)事件，并為其傳入附加數(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í)行后新添加的，綁定事件不會(huì)對其生效。同樣以初始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不會(huì)觸發(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事件不會(huì)對該元素也生效!</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還支持為事件類型附加額外的命名空間。當(dāng)為同一元素綁定多個(gè)相同類型的事件處理函數(shù)時(shí)。使用命名空間，可以在觸發(fā)事件、移除事件時(shí)限定觸發(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ā)時(shí)的命名空間:["<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兩個(gè)命名空間下<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ā)同時(shí)定義在foo和bar兩個(gè)命名空間下的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是一個(gè)對象，可以"屬性-值"的方式指定多個(gè)"事件類型-處理函數(shù)"。對應(yīng)的示例代碼如下：

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

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

總結(jié)：

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

相關(guān)推薦：

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

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

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

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

以上是jQuery中關(guān)於??bind()函數(shù)詳解的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)admin@php.cn