返回值:jQuerybind(type, [data], fn)
概述
為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。
.bind() 方法是用于往文檔上附加行為的主要方式。所有JavaScript事件對象,比如focus, mouseover, 和 resize,都是可以作為type參數(shù)傳遞進(jìn)來的。 jQuery還提供了一些綁定這些標(biāo)準(zhǔn)事件類型的簡單方式,比如.click()用于簡化.bind('click')。一共有以下這些:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。 任何作為type參數(shù)的字符串都是合法的;如果一個(gè)字符串不是原生的JavaScript事件名,那么這個(gè)事件處理函數(shù)會綁定到一個(gè)自定義事件上。這些自定義事件絕對不會由瀏覽器觸發(fā),但可以通過使用.trigger()或者.triggerHandler()在其他代碼中手動(dòng)觸發(fā)。 如果type參數(shù)的字符串中包含一個(gè)點(diǎn)(.)字符,那么這個(gè)事件就看做是有命名空間的了。這個(gè)點(diǎn)字符就用來分隔事件和他的命名空間。舉例來說,如果執(zhí)行 .bind('click.name', handler) ,那么字符串中的 click 是事件類型,而字符串 name 就是命名空間。命名空間允許我們?nèi)∠壎ɑ蛘哂|發(fā)一些特定類型的事件,而不用觸發(fā)別的事件。參考unbind()來獲取更多信息。 當(dāng)一個(gè)事件傳到一個(gè)元素上,所有綁定在上面的針對哪個(gè)事件的處理函數(shù)都會觸發(fā)。如果注冊了多個(gè)事件處理函數(shù),總是按照綁定的順序依次觸發(fā)。當(dāng)所有綁定的事件處理函數(shù)執(zhí)行完畢后,事件繼續(xù)沿著普通的事件冒泡途徑上浮。 .bind()最基本的用法是: <pre> $('#foo').bind('click', function() { alert('User clicked on "foo."'); }); </pre> 這個(gè)代碼能使ID為foo的元素響應(yīng)click事件。當(dāng)用戶點(diǎn)擊元素內(nèi)部之后,就會彈出一個(gè)警告框。 '''多個(gè)事件''' 依次可以綁定多個(gè)事件類型,每個(gè)事件類型用空格分隔: <pre> $('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); }); </pre> 這個(gè)代碼讓一個(gè)<div id="foo">元素(初始情況下class沒有設(shè)置成entered),當(dāng)鼠標(biāo)移進(jìn)去的時(shí)候,在class中加上entered,而當(dāng)鼠標(biāo)移出這個(gè)div的時(shí)候,則去除這個(gè)class值。 在jQuery 1.4中,我們也可以通過傳入一個(gè)映射對來一次綁定多個(gè)事件處理函數(shù): <pre> $('#foo').bind({ click: function() { // do something on click }, mouseenter: function() { // do something on mouseenter } }); </pre> '''事件處理函數(shù)''' fn這個(gè)參數(shù)接受一個(gè)回調(diào)函數(shù),就像先前展示的那樣。在這個(gè)事件處理函數(shù)內(nèi)部,this指向這個(gè)函數(shù)綁定的DOM元素。如果要讓這個(gè)元素變成jQuery對象來使用jQuery的方法,可以把這個(gè)對象傳入 $() 重新封裝。比如說: <pre>$('#foo').bind('click', function() { alert($(this).text()); }); </pre> 這個(gè)代碼執(zhí)行之后,當(dāng)用戶點(diǎn)擊了ID為foo的元素內(nèi)部之后,他的文本內(nèi)容就會出現(xiàn)在一個(gè)警告框中。 '''事件對象''' fn這個(gè)參數(shù)的回調(diào)函數(shù)還可以接受一個(gè)參數(shù)。當(dāng)這個(gè)函數(shù)被調(diào)用時(shí),一個(gè)JavaScript事件對象會作為一個(gè)參數(shù)傳進(jìn)來。 這個(gè)事件對象通常是沒有必要且可以省略的參數(shù),因?yàn)楫?dāng)這個(gè)事件處理函數(shù)綁定的時(shí)候就能夠明確知道他在觸發(fā)的時(shí)候應(yīng)該做些什么,通常就已經(jīng)可以獲得充分的信息了。然而在有些時(shí)候,在事件初始化的時(shí)候需要獲取更多關(guān)于用戶環(huán)境的信息??梢詤⒖纪暾年P(guān)于<a href="/category/events/event-object/">事件對象</a>的內(nèi)容(英文)。 在事件處理函數(shù)內(nèi)返回false就等價(jià)于執(zhí)行事件對象上的.preventDefault()和.stopPropagation()。 可以像這樣在事件處理函數(shù)內(nèi)使用事件對象: <pre>$(document).ready(function() { $('#foo').bind('click', function(event) { alert('The mouse cursor is at (' + event.pageX + ', ' + event.pageY + ')'); }); }); </pre> 注意,這個(gè)參數(shù)添加到了一個(gè)匿名函數(shù)上。這個(gè)代碼可以讓用戶在點(diǎn)擊ID為foo的元素時(shí),報(bào)告鼠標(biāo)點(diǎn)擊時(shí)相對于頁面的坐標(biāo)。 '''傳遞事件數(shù)據(jù)''' 可選的第二個(gè)參數(shù)data通常用的很少。如果提供了這個(gè)參數(shù),那么我們就能把一些附加信息傳遞給事件處理函數(shù)了。這個(gè)參數(shù)有個(gè)很好的用處,就是處理閉包帶來的問題。比如我們有兩個(gè)事件處理函數(shù)要指向同一個(gè)內(nèi)部變量: <pre>var message = 'Spoon!'; $('#foo').bind('click', function() { alert(message); }); message = 'Not in the face!'; $('#bar').bind('click', function() { alert(message); }); </pre> 由于這兩個(gè)函數(shù)在他們各自的環(huán)境中都有message,所以觸發(fā)時(shí)顯示的消息都是 Not in the face! 。變量值被改變了。為了回避這個(gè)問題,我們可以把message變量作為data參數(shù)傳遞進(jìn)去: <pre>var message = 'Spoon!'; $('#foo').bind('click', {msg: message}, function(event) { alert(event.data.msg); }); message = 'Not in the face!'; $('#bar').bind('click', {msg: message}, function(event) { alert(event.data.msg); }); </pre> 這時(shí)在函數(shù)內(nèi)部不再直接指向這個(gè)變量了;取而代之的是按值傳遞給了data參數(shù),他能保持綁定事件時(shí)的值。第一個(gè)函數(shù)現(xiàn)在會顯示Spoon!,而第二個(gè)則顯示Not in the face! 注意,如果這個(gè)對象按引用傳遞給了函數(shù),那么將會使情況變得極其復(fù)雜。 另外,可以參考.trigger()方法來了解如何在事件觸發(fā)時(shí)傳遞數(shù)據(jù),而不是在事件綁定的時(shí)候傳遞數(shù)據(jù)。 在jQuery 1.4中,不再支持把數(shù)據(jù)以及事件附加到一個(gè)object、embed或者applet元素上面。因?yàn)楫?dāng)往Java applet元素上附加數(shù)據(jù)時(shí),會觸發(fā)一個(gè)嚴(yán)重錯(cuò)誤警告。
用法 V1.4.3新增
bind(Type, [Data], false)
將第三個(gè)參數(shù)設(shè)置為false會使默認(rèn)的動(dòng)作失效。
參數(shù)
typeString
含有一個(gè)或多個(gè)事件類型的字符串,比如"click"或"submit",還可以是自定義事件名。
data (可選)Object
作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象
fnFunction
綁定到每個(gè)匹配元素的事件上面的處理函數(shù)
示例
描述:
當(dāng)每個(gè)段落被點(diǎn)擊的時(shí)候,彈出其文本。
jQuery 代碼:
$("p").bind("click", function(){
alert( $(this).text() );
});
描述:
你可以在事件處理之前傳遞一些附加的數(shù)據(jù)。
jQuery 代碼:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
描述:
通過返回false來取消默認(rèn)的行為并阻止事件起泡。
jQuery 代碼:
$("form").bind("submit", function() { return false; })
描述:
通過使用 preventDefault() 方法只取消默認(rèn)的行為。
jQuery 代碼:
$("form").bind("submit", function(event){
event.preventDefault();
});
描述:
通過使用 stopPropagation() 方法只阻止一個(gè)事件起泡。
jQuery 代碼:
$("form").bind("submit", function(event){
event.stopPropagation();
});