| bind(type, [data], fn) 傳回值:jQuery
概述
為每個匹配元素的特定事件綁定事件處理函數。
.bind() 方法是用於往文檔上附加行為的主要方式。所有JavaScript事件對象,比如
focus, mouseover, 和 resize,都是可以作為type參數傳遞進來的。
jQuery還提供了一些綁定這些標準事件類型的簡單方式,比如.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參數的字串都是合法的;如果一個字串不是原生的JavaScript事件
名,那麼這個事件處理函數會綁定到一個自訂事件上。這些自訂事件絕對不會由瀏
覽器觸發,但可以通過使用.trigger()或者.triggerHandler()在其他代碼中手動觸發。
如果type參數的字串中包含一個點(.)字元,那麼這個事件就看做是有命名空間的了。
這個點字元就用來分隔事件和他的命名空間。舉例來說,如果執行 .bind('click.name',
handler) ,那麼字串中的 click 是事件類型,而字串 name 就是命名空間。命名
空間允許我們取消綁定或者觸發一些特定類型的事件,而不用觸發別的事件。參考
unbind()來擷取更多資訊。
當一個事件傳到一個元素上,所有綁定在上面的針對哪個事件的處理函數都會觸發。如
果註冊了多個事件處理函數,總是按照綁定的順序依次觸發。當所有綁定的事件處理函
數執行完畢後,事件繼續沿著普通的事件冒泡途徑上浮。
.bind()最基本的用法是:
- $('#foo').bind('click', function() {
- alert('User clicked on "foo."');
- });
複製代碼
這個代碼能使ID為foo的元素響應click事件。當使用者點擊元素內部之後,就會彈出一個警
告框。
多個事件
依次可以綁定多個事件類型,每個事件類型用空格分隔:
- $('#foo').bind('mouseenter mouseleave', function() {
- $(this).toggleClass('entered');
- });
複製代碼
這個代碼讓一個<div id="foo">元素(初始情況下class沒有設定成entered),當滑鼠
移進去的時候,在class中加上entered,而當滑鼠移出這個div的時候,則去除這個
class值。
在jQuery 1.4中,我們也可以通過傳入一個映射對來一次綁定多個事件處理函數:
- $('#foo').bind({
- click: function() {
- // do something on click
- },
- mouseenter: function() {
- // do something on mouseenter
- }
- });
複製代碼
事件處理函數
fn這個參數接受一個回呼函數,就像先前展示的那樣。在這個事件處理函數內部,this指
向這個函數綁定的DOM元素。如果要讓這個元素變成jQuery對象來使用jQuery的方
法,可以把這個對象傳入 $() 重新封裝。比如說:
- $('#foo').bind('click', function() {
- alert($(this).text());
- });
複製代碼
這個代碼執行之後,當使用者點擊了ID為foo的元素內部之後,他的常值內容就會出現在一
個警告框中。
事件對象
fn這個參數的回呼函數還可以接受一個參數。當這個函數被調用時,一個JavaScript事
件對象會作為一個參數傳進來。
這個事件對象通常是沒有必要且可以省略的參數,因為當這個事件處理函數綁定的時候
就能夠明確知道他在觸發的時候應該做些什麼,通常就已經可以獲得充分的資訊了。然
而在有些時候,在事件初始化的時候需要擷取更多關於使用者環境的資訊。可以參考完整
的關於事件對象的內容(英文)。
在事件處理函數內返回false就等價於執行事件對象上的.preventDefault()
和.stopPropagation()。
可以像這樣在事件處理函數內使用事件對象:
- $(document).ready(function() {
- $('#foo').bind('click', function(event) {
- alert('The mouse cursor is at ('
- + event.pageX + ', ' + event.pageY + ')');
- });
- });
複製代碼
注意,這個參數添加到了一個匿名函數上。這個代碼可以讓使用者在點擊ID為foo的元素
時,報告滑鼠點擊時相對於頁面的座標。
傳遞事件數目據
可選的第二個參數data通常用的很少。如果提供了這個參數,那麼我們就能把一些附加
資訊傳遞給事件處理函數了。這個參數有個很好的用處,就是處理閉包帶來的問題。比
如我們有兩個事件處理函數要指向同一個內部變數:
- var message = 'Spoon!';
- $('#foo').bind('click', function() {
- alert(message);
- });
- message = 'Not in the face!';
- $('#bar').bind('click', function() {
- alert(message);
- });
複製代碼
由於這兩個函數在他們各自的環境中都有message,所以觸發時顯示的訊息都是 Not
in the face! 。變數值被改變了。為了迴避這個問題,我們可以把message變數作為
data參數傳遞進去:
- 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);
- });
複製代碼
這時在函數內部不再直接指向這個變數了;取而代之的是按值傳遞給了data參數,他能
保持綁定事件時的值。第一個函數現在會顯示Spoon!,而第二個則顯示Not in the
face!
注意,如果這個對象按引用傳遞給了函數,那麼將會使情況變得極其複雜。
另外,可以參考.trigger()方法來瞭解如何在事件觸發時傳遞資料,而不是在事件綁定的
時候傳遞資料。
在jQuery 1.4中,不再支援把資料以及事件附加到一個object、embed或者applet元
素上面。因為當往Java applet元素上附加資料時,會觸發一個嚴重錯誤警告。
參數
type:string
含有一個或多個事件類型的字串,比如"click"或"submit",還可以是自訂事件名。
data (可選)bject
作為event.data屬性值傳遞給事件對象的額外資料對象
fn:Function
綁定到每個匹配元素的事件上面的處理函數
|