jquery事件處理bind,多個事件

來源:互聯網
上載者:User
[Jquery] jquery事件處理bind(type, [data], fn)
data, bind, jquery, type
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()最基本的用法是:

  1. $('#foo').bind('click', function() {
  2. alert('User clicked on "foo."');
  3. });


複製代碼


這個代碼能使ID為foo的元素響應click事件。當使用者點擊元素內部之後,就會彈出一個警


告框。


多個事件


依次可以綁定多個事件類型,每個事件類型用空格分隔:

  1. $('#foo').bind('mouseenter mouseleave', function() {
  2.   $(this).toggleClass('entered');
  3. });


複製代碼


這個代碼讓一個<div id="foo">元素(初始情況下class沒有設定成entered),當滑鼠


移進去的時候,在class中加上entered,而當滑鼠移出這個div的時候,則去除這個


class值。


在jQuery 1.4中,我們也可以通過傳入一個映射對來一次綁定多個事件處理函數:

  1. $('#foo').bind({
  2. click: function() {
  3. // do something on click
  4. },
  5. mouseenter: function() {
  6. // do something on mouseenter
  7. }
  8. });


複製代碼


事件處理函數


fn這個參數接受一個回呼函數,就像先前展示的那樣。在這個事件處理函數內部,this指


向這個函數綁定的DOM元素。如果要讓這個元素變成jQuery對象來使用jQuery的方


法,可以把這個對象傳入 $() 重新封裝。比如說:

  1. $('#foo').bind('click', function() {
  2.   alert($(this).text());
  3. });


複製代碼


這個代碼執行之後,當使用者點擊了ID為foo的元素內部之後,他的常值內容就會出現在一


個警告框中。


事件對象


fn這個參數的回呼函數還可以接受一個參數。當這個函數被調用時,一個JavaScript事


件對象會作為一個參數傳進來。


這個事件對象通常是沒有必要且可以省略的參數,因為當這個事件處理函數綁定的時候


就能夠明確知道他在觸發的時候應該做些什麼,通常就已經可以獲得充分的資訊了。然


而在有些時候,在事件初始化的時候需要擷取更多關於使用者環境的資訊。可以參考完整


的關於事件對象的內容(英文)。


在事件處理函數內返回false就等價於執行事件對象上的.preventDefault()


和.stopPropagation()。


可以像這樣在事件處理函數內使用事件對象:

  1. $(document).ready(function() {
  2. $('#foo').bind('click', function(event) {
  3. alert('The mouse cursor is at ('
  4. + event.pageX + ', ' + event.pageY + ')');
  5. });
  6. });


複製代碼


注意,這個參數添加到了一個匿名函數上。這個代碼可以讓使用者在點擊ID為foo的元素


時,報告滑鼠點擊時相對於頁面的座標。


傳遞事件數目據


可選的第二個參數data通常用的很少。如果提供了這個參數,那麼我們就能把一些附加


資訊傳遞給事件處理函數了。這個參數有個很好的用處,就是處理閉包帶來的問題。比


如我們有兩個事件處理函數要指向同一個內部變數:

  1. var message = 'Spoon!';
  2. $('#foo').bind('click', function() {
  3. alert(message);
  4. });
  5. message = 'Not in the face!';
  6. $('#bar').bind('click', function() {
  7. alert(message);
  8. });


複製代碼


由於這兩個函數在他們各自的環境中都有message,所以觸發時顯示的訊息都是 Not


in the face! 。變數值被改變了。為了迴避這個問題,我們可以把message變數作為


data參數傳遞進去:

  1. var message = 'Spoon!';
  2. $('#foo').bind('click', {msg: message}, function(event) {
  3.   alert(event.data.msg);
  4. });
  5. message = 'Not in the face!';
  6. $('#bar').bind('click', {msg: message}, function(event) {
  7.   alert(event.data.msg);
  8. });


複製代碼


這時在函數內部不再直接指向這個變數了;取而代之的是按值傳遞給了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


綁定到每個匹配元素的事件上面的處理函數


收藏
分享
評分


回複
引用


訂閱
TOP

上海div+css周六周日家教式培訓熱招中....
  • 發短訊息
  • 加為好友


張體蔣泉
當前離線

UID
17705 
文章
精華
積分
閱讀許可權
10 
線上時間
1 小時 
註冊時間
2010-12-1 
最後登入
2010-12-3 


 

新手上路


2#


張體蔣泉發表於 2010-12-3 09:35
| 只看該作者
樣本

描述:當每個段落被點擊的時候,彈出其文本。

  1. $("p").bind("click", function(){
  2.   alert( $(this).text() );
  3. });


複製代碼


描述:你可以在事件處理之前傳遞一些附加的資料。

  1. function handler(event) {
  2.   alert(event.data.foo);
  3. }
  4. $("p").bind("click", {foo: "bar"}, handler)


複製代碼


描述:通過返回false來取消預設的行為並阻止事件起泡。

  1. $("form").bind("submit", function() { return false; })


複製代碼


描述:通過使用 preventDefault() 方法只取消預設的行為。

  1. $("form").bind("submit", function(event){
  2.   event.preventDefault();
  3. });


複製代碼


描述:通過使用 stopPropagation() 方法只阻止一個事件起泡。

  1. $("form").bind("submit", function(event){
  2.   event.stopPropagation();
  3. });


複製代碼


聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.