利用JQuery怎么實(shí)現(xiàn)一個(gè)綁定事件？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁(yè)設(shè)計(jì)、重慶網(wǎng)站建設(shè)公司、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站設(shè)計(jì)等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都輕質(zhì)隔墻板等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致稱譽(yù)！

jQuery提供了多種綁定事件的方式，每種方式各有其特點(diǎn)，明白了它們之間的異同點(diǎn)，有助于我們?cè)趯懘a的時(shí)候進(jìn)行正確的選擇，從而寫出優(yōu)雅而容易維護(hù)的代碼。下面我們來(lái)看下jQuery中綁定事件的方式都有哪些。

jQuery中提供了四種事件監(jiān)聽方式，分別是bind、live、delegate、on，對(duì)應(yīng)的解除監(jiān)聽的函數(shù)分別是unbind、die、undelegate、off。在開始看他們之前

一：bind(type,[data],function(eventObject))

bind是使用頻率較高的一種，作用就是在選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)，參數(shù)的含義如下：

type:事件類型，如click、change、mouseover等;

data:傳入監(jiān)聽函數(shù)的參數(shù)，通過event.data取到。可選;

function:監(jiān)聽函數(shù)，可傳入event對(duì)象，這里的event是jQuery封裝的event對(duì)象，與原生的event對(duì)象有區(qū)別，使用時(shí)需要注意

bind的源碼：

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);

bind的特點(diǎn)就是會(huì)把監(jiān)聽器綁定到目標(biāo)元素上，有一個(gè)綁一個(gè)，在頁(yè)面上的元素不會(huì)動(dòng)態(tài)添加的時(shí)候使用它沒什么問題。但如果列表中動(dòng)態(tài)增加一個(gè)“列表元素5”，點(diǎn)擊它是沒有反應(yīng)的，必須再bind一次才行。要想不這么麻煩，我們可以使用live。

jQuery還有一種事件綁定的簡(jiǎn)寫方式如a.click(function(){});、a.change(function(){});等，它們的作用與bind一樣，僅僅是簡(jiǎn)寫而已。

二：live(type, [data], fn)

live的參數(shù)和bind一樣，它又有什么蹊蹺呢，我們還是先瞄一眼源碼：

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

可以看到live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了。這個(gè)context是什么東西呢?其實(shí)就是元素的限定范圍，看了下面的代碼就清楚了：

$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol

通常情況下，我們都不會(huì)像第三種方式那樣使用選擇器，所以也就認(rèn)為這個(gè)context通常就是document了，即live方法把監(jiān)聽器綁定到了 document上了。不把監(jiān)聽器直接綁定在元素上，你是不是想起事件委托機(jī)制來(lái)了呢?若沒有，可以點(diǎn)擊這里回憶一下。live正是利用了事件委托機(jī)制來(lái) 完成事件的監(jiān)聽處理，把節(jié)點(diǎn)的處理委托給了document。在監(jiān)聽函數(shù)中，我們可以用event.currentTarget來(lái)獲取到當(dāng)前捕捉到事件的 節(jié)點(diǎn)。下面的例子來(lái)揭曉：

$('#myol li').live('click',getHtml);

三：live存在那樣的缺點(diǎn)，所以我們就思考，既然老爺子負(fù)擔(dān)那么重，可不可以別把監(jiān)聽器綁定在document上呢，綁定在就近的父級(jí)元素上不就好了。順應(yīng)正常邏輯，delegate誕生了。

參數(shù)多了一個(gè)selector，用來(lái)指定觸發(fā)事件的目標(biāo)元素，監(jiān)聽器將被綁定在調(diào)用此方法的元素上。看看源碼：

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

又是調(diào)用了on，并且把selector傳給了on。看來(lái)這個(gè)on真的是舉足輕重的東西。照樣先不管它。看看示例先：

$('#myol').delegate('li','click',getHtml);

看了這么多，你是不是迫不及待想看看這個(gè)on的真實(shí)面目了呢，這就來(lái)：

on(type,[selector],[data],fn)

參數(shù)與delegate差不多但還是有細(xì)微的差別，首先type與selector換位置了，其次selector變?yōu)榱丝蛇x項(xiàng)。交換位置的原因不好查證，應(yīng)該是為了讓視覺上更舒服一些吧。

我們先不傳selector來(lái)看一個(gè)例子：

$('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己，與bind的效果一樣。至于傳selector進(jìn)去，就是跟delegate一樣的意義了，除了參數(shù)順序不同，其他完全一樣。

終于看到on的真實(shí)作用了，那么，這么多的事件綁定方式，我們?cè)撊绾芜M(jìn)行選擇呢?

其實(shí)這個(gè)問題是完全不必糾結(jié)的，因?yàn)槟阋呀?jīng)知道他們之間的區(qū)別了不是么?根據(jù)實(shí)際情況斟酌使用就行。不過官方有一個(gè)推薦就是盡量使用on，因?yàn)槠渌?方法都是內(nèi)部調(diào)用on來(lái)完成的，直接使用on可以提高效率，而且你完全可以用on來(lái)代替其他三種寫法。至于如何代替我想就不必這么直白的寫出來(lái)了，真正理 解它們的區(qū)別之后自然而然也就不是難事了。

看完上述內(nèi)容，你們掌握利用JQuery怎么實(shí)現(xiàn)一個(gè)綁定事件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)名稱：利用JQuery怎么實(shí)現(xiàn)一個(gè)綁定事件-創(chuàng)新互聯(lián)
本文來(lái)源：http://www.chinadenli.net/article18/dgeidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站營(yíng)銷、網(wǎng)站策劃、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)