jQuery中的bind()函數(shù)跟on()函數(shù)有什么區(qū)別呢？

.bind()與.on()的區(qū)別：

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),東鄉(xiāng)族網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:東鄉(xiāng)族等地區(qū)。東鄉(xiāng)族做網(wǎng)站價(jià)格咨詢:028-86922220

（1）是否支持selector這個(gè)參數(shù)值。由于javascript的事件冒泡特性，如果在父元素上注冊了一個(gè)事件處理函數(shù)，當(dāng)子元素上發(fā)生這個(gè)事件的時(shí)候，父元素上的事件處理函數(shù)也會被觸發(fā)。

如果使用on的時(shí)候，不設(shè)置selector，那么on與bind就沒有區(qū)別了。

（2）on綁定的事件處理函數(shù)，對于未來新增的元素一樣可以的，和delegate效果相同，而bind則不行。?

（3） delegate用法與on()相同，只是參數(shù)的順序不同：

擴(kuò)展資料：

.bind()與.on()的實(shí)際應(yīng)用：

1.bind()是直接綁定在元素上 ，將一本地地址與一套接口捆綁。如無錯誤發(fā)生，則bind()返回0。否則的話，將返回-1，應(yīng)用程序可通過WSAGetLastError()獲取相應(yīng)錯誤代碼。

用于事件處理程序

function ClassName(){

this.eventHandler = (function(){

}).bind(this);

}

2.on()則實(shí)現(xiàn)事件代理, 可以在匹配元素上綁定一個(gè)或者多個(gè)事件處理函數(shù)。

（1） 用來綁定多事件,并且為同一函數(shù)，如：

$('div').on('click mouseover',function(){

//do sth

});

（2）多個(gè)事件綁定不同函數(shù)，如：

$('div').on({

'click':function(){

//do sth

},

'mouseover':function(){

//do sth

}

});

（3）事件代理，如：

html:

button id="bt1"按鈕1/button

jq:

$('#bt1').on('click',function(){

$('body').append('button按鈕2/button');

});

$('body').on('click','.bt2',function(){

console.log('這是bt2');

}

參考資料：百度百科-bind()

jQuery版本升級有哪些注意事項(xiàng)

1. 使用了被廢棄的jQuery.fn.live方法

jQuery Migrate庫對此錯誤也在控制臺有相應(yīng)的警告：

JQMIGRATE: jQuery.fn.live() is deprecated

live方法原本的作用是設(shè)置事件代理，該方法在jQuery 1.7之后就不推薦使用了，取代之的是jQuery.fn.on函數(shù)。他們的接口分別是：

$(selector).live('click', function(){/* some code */});$(selector).on('click', [selector,] function(){/* some code */});

乍一看，中括號里面的參數(shù)可以省略掉，倆函數(shù)不是一模一樣么？于是天真地把函數(shù)名live直接替換成on，大部分時(shí)候，這么做好像沒有引起任何異常。但是如果在你調(diào)用on函數(shù)的時(shí)候，前面的$(selector)在當(dāng)前的網(wǎng)頁上根本不匹配任何元素（該元素可能是后面的代碼才加到DOM里的），那是不會綁定成功的。事實(shí)上，live函數(shù)將$(selector)代理到了document元素上，這個(gè)元素是肯定存在的，所以不會出現(xiàn)類似情況。正確的替換方法應(yīng)該是：

$(selector).live('click', function(){/* some code */}); 替換為$(document).on('click', selector, function(){/* some code */});

2. 使用了被廢棄的jQuery.fn.die方法

jQuery Migrate對此錯誤的警告是：

JQMIGRATE: jQuery.fn.die() is deprecated

這個(gè)方法和前面的live剛好反過來，取消事件處理函數(shù)的綁定。新版本中應(yīng)該使用off函數(shù)代替之，替換方式類似。

3. 使用了被廢棄的jQuery.fn.toggle函數(shù)

jQuery Migrate對此錯誤的警告是：

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

早期jQuery中名字叫toggle的函數(shù)有兩個(gè)，一個(gè)是用于控制元素的顯示和隱藏，這個(gè)用途的函數(shù)目前jQuery中依舊存在；另一個(gè)就是上面提到的被廢棄的toggle函數(shù)，它用于綁定至少兩個(gè)函數(shù)到同一個(gè)元素，點(diǎn)擊該元素的時(shí)候兩個(gè)函數(shù)交替著執(zhí)行。這兩個(gè)同名函數(shù)功能相差甚遠(yuǎn)，為了不引起誤導(dǎo)，在jQuery

1.8中就不再建議使用了。替換的方式是把兩個(gè)函數(shù)合并成一個(gè)函數(shù)的if-else兩個(gè)區(qū)段，然后自己設(shè)置一個(gè)boolean變量，控制每次點(diǎn)擊時(shí)應(yīng)該執(zhí)行哪個(gè)區(qū)段即可。

4. 使用了被廢棄的jQuery.browser屬性

jQuery Migrate對此錯誤的警告是：

JQMIGRATE: jQuery.browser is deprecated

在前端開發(fā)中我們經(jīng)常要根據(jù)不同的瀏覽器版本做出不同的處理，jQuery.browser本來是通過瀏覽器的userAgent字段來提取瀏覽器相關(guān)信息的。新版本中已經(jīng)將其廢棄，而是建議使用特征檢測的方法去判斷，并且給了一個(gè)Modernizr庫作為推薦。不過，改成這個(gè)庫可能改動成本有點(diǎn)大，如果你還是想沿用jQuery.browser的思路的話，可以自己去實(shí)現(xiàn)一下它。例如，判斷是不是IE瀏覽器，可以用

/msie/.test(navigator.userAgent.toLowerCase());

即自己手動獲取userAgent字段，并且做一個(gè)正則表達(dá)式匹配。其他瀏覽器思路類似，都是對navigator.userAgent做一個(gè)正則匹配。

5. $(html)格式書寫錯誤

在jQuery Migrate中，出現(xiàn)以下三種警告中的任何一種，都是屬于這個(gè)錯誤：

JQMIGRATE: $(html) HTML strings must start with '' characterJQMIGRATE: $(html) HTML text after last tag is ignoredJQMIGRATE: HTML string cannot start with a '#' character

這個(gè)錯誤還是蠻值得注意的，因?yàn)槲覀兾恼麻_頭所說的jQuery低版本有XSS漏洞，其實(shí)就是和這個(gè)錯誤有關(guān)系。在javascript中我們經(jīng)常會直接將一段html格式的字符串寫在jQuery引用里面，比如$('p/p')。按照新版本的jQuery要求，這段html格式的字符串必須是以左尖括號（小于號）開頭，其他字符都不可以。以下幾種寫法，都是錯誤的：

$(" p/p"); //錯誤，字符串最開頭有一個(gè)空格，不是以小于號''開頭的$("p/ptest"); //不標(biāo)準(zhǔn)，html標(biāo)簽結(jié)束后后面還有多余的"test"，它會被忽略$("#p/p); //錯誤，以井號開頭并且后面并不是一個(gè)css選擇器

這一點(diǎn)在書寫的時(shí)候注意一下就可以了，其實(shí)還是很容易避免的。其中第三種錯誤其實(shí)就不僅僅是警告了，jQuery會直接拋出一個(gè)錯誤，停止javascript代碼的繼續(xù)執(zhí)行。一般情況以井號開頭，例如$("#test")，其實(shí)就是一個(gè)普通的選擇器，但是上面例子中后面又夾雜著html字符串，這會被jQuery判斷為潛在的XSS攻擊。

6. jQuery.fn.attr方法的錯誤使用（這是個(gè)非常易犯的錯誤！）

jQuery Migrate中，關(guān)于attr方法的警告有以下這些：

JQMIGRATE: jQuery.fn.attr('value', val) no longer sets propertiesJQMIGRATE: jQuery.fn.attr('value') no longer gets propertiesJQMIGRATE: jQuery.fn.attr('checked') may use property instead of attributeJQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated

實(shí)踐中我發(fā)現(xiàn)，早期寫的代碼里面，獲取一個(gè)input輸入表單的值時(shí)，是怎么獲取的呢？$('input').attr('value')；又是怎么設(shè)置的呢？$('input').attr('value',

'helloworld')。這在新版本中都是不正確的！正確的做法應(yīng)該是

$('input').val(); //獲取input表單現(xiàn)在所輸入的值

$('input').val('helloworld'); //設(shè)置input表單輸入的值

到底是獲取還是設(shè)置，只取決于調(diào)用val方法時(shí)有沒有帶著參數(shù)。

如果你想手動設(shè)置單選框（例如input

type="radio" ）被選中，應(yīng)該怎么設(shè)置呢？老的代碼里面可能會看到這樣 $('input').attr('checked',

true)或者$('input').attr('checked', 'checked')。這些現(xiàn)在也都是不正確的！正確的做法應(yīng)該是

$('input').prop('checked', true); //把單選框設(shè)為選中狀態(tài)$('input').prop('checked'); //獲取單選框是不是被選中了，返回true或false

這是從jQuery

1.6版本開始使用的寫法。如果設(shè)置disabled和selected屬性，也是使用prop方法。那到底什么時(shí)候使用attr方法呢？兩者的區(qū)別是：prop設(shè)置的是某元素固有的屬性，而attr設(shè)置的是寫在html標(biāo)簽上的自定義屬性。舉個(gè)例子：

input type="checkbox" checked="checked" haha="hello" var v1 = $('input').prop("checked"); //返回true/false，是否被選中，隨狀態(tài)改變而改變var v2 = $('input').attr("checked"); //返回"checked"，這是你設(shè)置在標(biāo)簽上的，不會變var v3 = $('input').attr("haha"); //返回"hello"，自定義屬性var v4 = $('input').prop("haha"); //返回undefined，根本沒有這個(gè)固有屬性

上面提到的第四個(gè)錯誤，jQuery.fn.attr(props, pass) is deprecated這個(gè)警告在真實(shí)項(xiàng)目中從未見到過，看了一下源碼，觸發(fā)該警告的jQuery寫法很少見，可忽略。

7. 向$.parseJSON傳入了非法的參數(shù)

在jQuery Migrate中，該錯誤產(chǎn)生如下警告

JQMIGRATE: jQuery.parseJSON requires a valid JSON string

jQuery之所以改這個(gè)接口，是為了和瀏覽器自帶的JSON.parse接口對齊，從jQuery

1.9開始生效。這個(gè)問題常見于AJAX接收服務(wù)端返回值的時(shí)候。服務(wù)端可能返回一個(gè)空字符串，這時(shí)候調(diào)用該接口會產(chǎn)生錯誤。必須向$.parseJSON傳入合法的JSON字符串。修正方法如下：

var v1 = $.parseJSON(str); 替換為var v1 = $.parseJSON( str ? str : "null" );

8. 使用了被廢棄的'hover'事件字符串

在jQuery Migrate中該錯誤產(chǎn)生如下警告

JQMIGRATE: 'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'

在注冊事件處理函數(shù)時(shí)，'hover'以前可以看作是'mouseenter mouseleave'兩個(gè)事件的別稱。目前已經(jīng)將該別稱去掉了，所以代碼中請用'mouseenter mouseleave'替換之。

9. jQuery.fn.andSelf已經(jīng)被替換，不能再使用

jQuery Migrate中是這樣的警告：

JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()

兩個(gè)函數(shù)功能是完全一樣的，可以直接替換。

1. jQuery不兼容瀏覽器的怪異模式

這個(gè)錯誤的觸發(fā)方式非常簡單，直接把html頁面最頂端的!DOCTYPE

html標(biāo)簽刪掉就可以了。瀏覽器怪異模式是為了兼容老古董網(wǎng)頁而設(shè)計(jì)的，詳情可參考這篇文章：鏈接。我想現(xiàn)在的WEB程序員應(yīng)該不會傻到不寫DOCTYPE，也很少使用這種模式下的瀏覽器吧。

jQuery Migrate展示的錯誤警告如下：

2. AJAX全局事件必須綁定到document節(jié)點(diǎn)上

jQuery Migrate中的警告如下：

JQMIGRATE: AJAX events should be attached to document: ajaxStart

jQuery中AJAX全局事件包括如下接口ajaxStart,

ajaxStop, ajaxSend, ajaxComplete, ajaxError,

ajaxSuccess。因?yàn)檫@些事件使用的比較少，所以也歸在少見坑當(dāng)中。從jQuery

1.9開始，這些事件只能綁定到$(document)上。改正方法如下（摘自jQuery官網(wǎng)）：

$("#status").ajaxStart(function(){ $(this).text("Ajax started"); }); 修改為$(document).ajaxStart(function(){ $("#status").text("Ajax started"); });

3. IE6/7/8瀏覽器不支持修改input表單的type屬性

在jQuery Migrate中是這樣的警告：

JQMIGRATE: Can't change the 'type' of an input or button in IE 6/7/8

改變input的表單的type屬性，你可以直接把文本框改成單選框，改成多選框等等。雖然我感覺這是一種并不算優(yōu)雅的行為，但是很多瀏覽器都是支持這么做的，除了IE6/7/8。建議在實(shí)際中也是少用這個(gè)功能為好。

4. 使用了被移除的$.clean, $.event.handle, $.attrFn, $.fn.data('events'), jQuery.event.trigger屬性與方法

在jQuery Migrate中是這樣的警告：

JQMIGRATE: jQuery.clean() is deprecatedJQMIGRATE: jQuery.event.handle is undocumented and deprecatedJQMIGRATE: jQuery.attrFn is deprecatedJQMIGRATE: Use of jQuery.fn.data('events') is deprecatedJQMIGRATE: Global events are undocumented and deprecated

如果你在自己的代碼中使用過這五個(gè)接口，那確實(shí)是仔細(xì)研究過jQuery源代碼的高人啊。因?yàn)檫@五個(gè)接口從來沒有出現(xiàn)在jQuery的官方文檔中，并且有些在后續(xù)版本中已經(jīng)刪除，可謂來無影去無蹤。看源代碼的話在早期版本有機(jī)會找到他們的存在，但是并不建議使用。建議采用其他方法實(shí)現(xiàn)相應(yīng)的功能。什么？你不知道這五個(gè)函數(shù)是什么功能？那最好了，你現(xiàn)在也不需要知道了……

5. 使用了過時(shí)的$.sub()方法

jQuery Migrate中對本問題的警告如下：

JQMIGRATE: jQuery.sub() is deprecated

這個(gè)接口非常簡單，不接受任何參數(shù)。它用來創(chuàng)建一個(gè)jQuery的副本。該方法在jQuery 1.7版本開始就已經(jīng)不再使用。

6. 使用了過時(shí)的jQuery.fn.error方法

jQuery Migrate中對本問題的警告如下：

JQMIGRATE: jQuery.fn.error() is deprecated

在jQuery中，error也是和click一樣的事件。注冊該事件的處理函數(shù)，以前是$(selector).error(function(){})，現(xiàn)在已經(jīng)被廢棄，可以使用$(selector).on('error', function(){})來替代。

JS-阻止冒泡事件與事件委托

事件冒泡：開始時(shí)由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節(jié)點(diǎn)。

1.標(biāo)準(zhǔn)寫法：利用事件對象里面的 stopPropagation()方法

e.stopPropagation()

2.非標(biāo)準(zhǔn)寫法：IE 6-8 利用事件對象 cancelBubble 屬性

e.cancelBubble = true;

事件委托也稱為事件代理， 在 jQuery 里面稱為事件委派。 不是每個(gè)子節(jié)點(diǎn)單獨(dú)設(shè)置事件監(jiān)聽器，而是事件監(jiān)聽器設(shè)置在其父節(jié)點(diǎn)上，然后利用冒泡原理影響設(shè)置每個(gè)子節(jié)點(diǎn)。

如：給 ul 注冊點(diǎn)擊事件，然后利用事件對象的 target 來找到當(dāng)前點(diǎn)擊的 li，因?yàn)辄c(diǎn)擊 li，事件會冒泡到 ul 上，ul 有注冊事件，就會觸發(fā)事件監(jiān)聽器，這里只操作了一次 DOM ，提高了程序的性能。

jquery中的delegate函數(shù)有什么用

delegate()函數(shù)用于為指定元素的一個(gè)或多個(gè)事件綁定事件處理函數(shù)。

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

即使是執(zhí)行delegate()函數(shù)之后新添加的元素，只要它符合條件，綁定的事件處理函數(shù)仍然對其有效。

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

要刪除通過delegate()綁定的事件，請使用undelegate()函數(shù)。

從jQuery 1.7開始，請優(yōu)先使用事件函數(shù)on()替代該函數(shù)。

該函數(shù)屬于jQuery對象(實(shí)例)。

語法

jQuery 1.4.2 新增該函數(shù)。其主要有以下兩種形式的用法：

用法一：

jQueryObject.delegate( selector , events [, data ], handler )

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

jQueryObject.delegate( selector, eventsMap )

參數(shù)

參數(shù)

描述

selector

String類型一個(gè)jQuery選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。如果該參數(shù)為null或被省略，則表示當(dāng)前元素自身綁定事件(實(shí)際觸發(fā)者也可能是后代元素，只要事件流能到達(dá)當(dāng)前元素即可)。

events

String類型一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。

data

可選/任意類型觸發(fā)事件時(shí)，需要通過event.data傳遞給事件處理函數(shù)的任意數(shù)據(jù)。

handler

Functidelegate類型指定的事件處理函數(shù)。

eventsMap

Object類型一個(gè)Object對象，其每個(gè)屬性對應(yīng)事件類型和可選的命名空間(參數(shù)events)，屬性值對應(yīng)綁定的事件處理函數(shù)(參數(shù)handler)。

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

關(guān)于參數(shù)selector，你可以簡單地理解為：如果該參數(shù)等于null或被省略，則為當(dāng)前匹配元素綁定事件；否則就是為當(dāng)前匹配元素的后代元素中符合selector選擇器的元素綁定事件。

參數(shù)handler中的this指向當(dāng)前匹配元素的后代元素中觸發(fā)該事件的DOM元素。如果參數(shù)selector等于null或被省略，則this指向當(dāng)前匹配元素(也就是該元素)。

delegate()還會為handler傳入一個(gè)參數(shù)：表示當(dāng)前事件的Event對象。

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

如果事件處理函數(shù)handler僅僅只用于返回false值，可以直接將handler設(shè)為false。

返回值

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

重要說明：delegate()函數(shù)并不是為當(dāng)前jQuery對象匹配的元素綁定事件處理函數(shù)，而是為它們的后

代元素中符合選擇器selector參數(shù)的元素綁定事件處理函數(shù)。delegate()函數(shù)并不是直接為這些后代元素挨個(gè)綁定事件，而是"委托"給當(dāng)前

jQuery對象的匹配元素來處理。由于DOM

2級的事件流機(jī)制，當(dāng)后代元素selector觸發(fā)事件時(shí)，該事件會在事件冒泡中傳遞給其所有的祖輩元素，當(dāng)事件流傳遞到當(dāng)前匹配元素時(shí)，jQuery會

判斷是哪個(gè)后代元素觸發(fā)了事件，如果該元素符合選擇器selector，jQuery就會捕獲該事件，從而執(zhí)行綁定的事件處理函數(shù)。

示例說明

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

// 這里的選擇器selector用于指定可以觸發(fā)事件的元素

// 這里的選擇器ancestor應(yīng)是selector的祖輩元素，selector觸發(fā)的事件可以被其祖輩元素在事件流中捕獲，從而以"代理"的形式觸發(fā)事件。

// jQuery 1.0+ (1.4.3+支持參數(shù)data)

$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支持參數(shù)data)

$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支持參數(shù)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"spanCodePlayer/span/p

p id="n3"span專注于編程開發(fā)技術(shù)分享/span/p

em id="n4";/em

/div

p id="n5"Google/p

我們?yōu)閐iv中的所有p元素綁定點(diǎn)擊事件：

// 為div中的所有p元素綁定click事件處理程序

// 只有n2、n3可以觸發(fā)該事件

$("div").delegate("p", "click", function(){

// 這里的this指向觸發(fā)點(diǎn)擊事件的p元素(Element)

alert( $(this).text() );

});

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

如果要綁定所有的p元素，你可以編寫如下jQuery代碼：

//為所有p元素綁定click事件處理程序(body內(nèi)的所有p元素，就包含所有的p元素)

//n2、n3、n5均可觸發(fā)該事件

$("body").delegate("p", "click", function(event){

// 這里的this指向觸發(fā)點(diǎn)擊事件的p元素(Element)

alert( $(this).text() );

});

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

var data = { id: 5, name: "李四" };

//為n5綁定mouseenter mouseleave兩個(gè)事件，并為其傳入附加數(shù)據(jù)data

//附加數(shù)據(jù)可以是任意類型

$("body").delegate("#n5", "mouseenter mouseleave", data, function(event){

var $me = $(this);

var options = event.data; // 這就是傳入的附加數(shù)據(jù)

if( event.type == "mouseenter"){

$me.html( "你好，" + options.name + "!");

}else if(event.type == "mouseleave" ){

$me.html( "再見，" + options.name + "!");

}

} );

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

//為div中的所有p元素綁定click事件處理程序

//只有n2、n3可以觸發(fā)該事件

$("div").delegate("p", "click", function(event){

alert( $(this).text() );

});

//后添加的n6也可以觸發(fā)上述click事件，因?yàn)樗彩莇iv中的p元素

$("#n1").append('p id="n6"上述綁定的click事件對此元素也生效!/p');

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

function clickHandler(event){

alert( "觸發(fā)時(shí)的命名空間:[" + event.namespace + "]");

}

var $p = $("p");

// A：為所有p元素綁定click事件，定義在foo和bar兩個(gè)命名空間下

$("body").delegate( "p", "click.foo.bar", clickHandler );

// B：為所有p元素綁定click事件，定義在test命名空間下

$("body").delegate( "p", "click.test", clickHandler );

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

// 觸發(fā)所有click事件

$n2.trigger("click"); // 觸發(fā)A和B (event.namespace = "")

// 觸發(fā)定義在foo命名空間下的click事件

$n2.trigger("click.foo"); // 觸發(fā)A (event.namespace = "foo")

// 觸發(fā)定義在bar命名空間下的click事件

$n2.trigger("click.bar"); // 觸發(fā)A (event.namespace = "bar")

// 觸發(fā)同時(shí)定義在foo和bar兩個(gè)命名空間下的click事件

$n2.trigger("click.foo.bar"); // 觸發(fā)A (event.namespace = "bar.foo")

// 觸發(fā)定義在test命名空間下的click事件

$n2.trigger("click.test"); // 觸發(fā)B (event.namespace = "test")

// 移除所有p元素定義在foo命名空間下的click事件處理函數(shù)

$p.undelegate( "click.foo" ); // 移除A

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

var events = {

"mouseenter": function(event){

$(this).html( "你好!");

},

"mouseleave": function(event){

$(this).html( "再見!");

}

};

//為n5綁定mouseenter mouseleave兩個(gè)事件，并為其傳入附加數(shù)據(jù)data

$("body").delegate("#n5", events);

jquery中以下哪些方法可以實(shí)現(xiàn)事件代理

H5edu教育Html5為您解答：

1.事件代理的原理和意義

實(shí)現(xiàn)原理是利用了瀏覽器的事件冒泡和事件源（target）。

在js中事件會冒泡到父級節(jié)點(diǎn)，所以我們可以在父級節(jié)點(diǎn)進(jìn)行事件代理。例如一個(gè)使用jQuery的函數(shù)：

$("#tab td").click(function(){

$(this).css("background","red");

}) ;

上面的函數(shù)給一個(gè)tab的td加了一個(gè)單擊事件，但是如果表格1000行，就得綁定1000次，

$("#tab").bind("click",function(ev)){

var $obj=$(ev.target);

$obj.css("background","red");

}

以上用bind函數(shù)將click綁定到了tab上，從而實(shí)現(xiàn)事件代理。

2.jQuery中的綁定函數(shù)

(1).bind()為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)

$("#niu").bind('click',function(){

alert("hello niuniu");

});

此代碼把id為niu的元素響應(yīng)事件click，并顯示警報(bào)。使用bind綁定多個(gè)事件時(shí)，可以這樣

$("#niu").bind('mouseenter mouseleava',function(){

$(this).css("background","yellow");

});

$("#foo").bind({

click:function(){

},

mouseenter:function(){

}

});

(2).delegate()指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)

$("table").delegate("td","click",function(){

$(this).toggleClass("chosen");

});

(3).on在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)

function greet(event) { alert("Hello"+event.data.name); }

$("button").on("click", { name: "Karl" }, greet);

$("button").on("click", { name: "Addy" }, greet);

(4).live給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來的

$("a").live("click", function() { return false; })

以上是常用的綁定函數(shù)。

技術(shù)文檔引用：

自從.live()方法處理事件一旦傳播到文檔的頂部，live事件是不可能停止傳播的。同樣地，.delegate() 事件將始終傳播給其中包含的被委托元素；同時(shí)，任何在 DOM 樹中，比這些元素低的元素上綁定的相同事件，在 .delegate() 事件被調(diào)用的時(shí)候，也會被觸發(fā)。因此，如果要在事件中阻止委托事件被觸發(fā)，可以調(diào)用event.stopPropagation()或者返回false防止委派處理程序冒泡。

簡單來說，.bind()是直接綁定在元素上，而.live()和.delegate()則是通過冒泡的方式來綁定到元素上的。.bind()方法只能給當(dāng)前存在的元素綁定事件，對于事后采用JS方式新生成的元素?zé)o效，而live方法可以對后生成的元素也可以綁定相應(yīng)的事件。

分享題目：jquery事件代理,jquery實(shí)現(xiàn)事件委托
分享地址：http://chinadenli.net/article15/dsshigi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、云服務(wù)器、面包屑導(dǎo)航、微信小程序、商城網(wǎng)站、企業(yè)建站

廣告

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