1. 程式人生 > >query事件整理(多個事件可以同時繫結到一個元素中)

query事件整理(多個事件可以同時繫結到一個元素中)

方法 描述
向匹配元素附加一個或更多事件處理器
觸發、或將函式繫結到指定元素的 blur 事件
觸發、或將函式繫結到指定元素的 change 事件
觸發、或將函式繫結到指定元素的 click 事件
觸發、或將函式繫結到指定元素的 double click 事件
die() 移除所有通過 live() 函式新增的事件處理程式。
觸發、或將函式繫結到指定元素的 error 事件
觸發、或將函式繫結到指定元素的 focus 事件
觸發、或將函式繫結到指定元素的 key down 事件
觸發、或將函式繫結到指定元素的 key press 事件
觸發、或將函式繫結到指定元素的 key up 事件
為當前或未來的匹配元素新增一個或多個事件處理器
觸發、或將函式繫結到指定元素的 load 事件
觸發、或將函式繫結到指定元素的 mouse down 事件
觸發、或將函式繫結到指定元素的 mouse enter 事件
觸發、或將函式繫結到指定元素的 mouse leave 事件
觸發、或將函式繫結到指定元素的 mouse move 事件
觸發、或將函式繫結到指定元素的 mouse out 事件
觸發、或將函式繫結到指定元素的 mouse over 事件
觸發、或將函式繫結到指定元素的 mouse up 事件
one() 向匹配元素新增事件處理器。每個元素只能觸發一次該處理器。
文件就緒事件(當 HTML 文件就緒可用時)
觸發、或將函式繫結到指定元素的 resize 事件
觸發、或將函式繫結到指定元素的 scroll 事件
觸發、或將函式繫結到指定元素的 select 事件
觸發、或將函式繫結到指定元素的 submit 事件
繫結兩個或多個事件處理器函式,當發生輪流的 click 事件時執行。
從匹配元素移除一個被新增的事件處理器
從匹配元素移除一個被新增的事件處理器,現在或將來
觸發、或將函式繫結到指定元素的 unload 事件

例項

當點選滑鼠時,隱藏或顯示 p 元素:

$("button").bind("click",function(){
  $("p").slideToggle();
});

bind() 方法為被選元素新增一個或多個事件處理程式,並規定事件發生時執行的函式。

例項

當輸入域失去焦點 (blur) 時改變其顏色:

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

親自試一試

定義和用法

當元素失去焦點時發生 blur 事件。

blur() 函式觸發 blur 事件,或者如果設定了 function 引數,該函式也可規定當發生 blur 事件時執行的程式碼。

提示:早前,blur 事件僅發生於表單元素上。在新瀏覽器中,該事件可用於任何元素。

例項

當輸入域發生變化時改變其顏色:

$(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
});

親自試一試

定義和用法

當元素的值發生改變時,會發生 change 事件。

該事件僅適用於文字域(text field),以及 textarea 和 select 元素。

change() 函式觸發 change 事件,或規定當發生 change 事件時執行的函式。

註釋:當用於 select 元素時,change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時,該事件會在元素失去焦點時發生。

例項

當雙擊按鈕時,隱藏或顯示元素:

$("button").dblclick(function(){
  $("p").slideToggle();
});

親自試一試

定義和用法

當雙擊元素時,會發生 dblclick 事件。

當滑鼠指標停留在元素上方,然後按下並鬆開滑鼠左鍵時,就會發生一次 click。

在很短的時間內發生兩次 click,即是一次 double click 事件。

dblclick() 方法觸發 dblclick 事件,或規定當發生 dblclick 事件時執行的函式。

提示:如果把 dblclick 和 click 事件應用於同一元素,可能會產生問題。

當點選滑鼠時,隱藏或顯示 p 元素:

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

親自試一試

定義和用法

delegate() 方法為指定的元素(屬於被選元素的子元素)新增一個或多個事件處理程式,並規定當這些事件發生時執行的函式。

使用 delegate() 方法的事件處理程式適用於當前或未來的元素(比如由指令碼建立的新元素)。

例項

移除所有通過 live() 方法向 p 元素新增的事件處理程式:

$("p").die();

親自試一試

定義和用法

die() 方法移除所有通過 live() 方法向指定元素新增的一個或多個事件處理程式。


如果影象不存在,則用一段預定義的文字取代它:

$("img").error(function(){
  $("img").replaceWith("

Missing image!

"); });

親自試一試

定義和用法

當點選 p 元素時,增加該元素的文字大小:

$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});

親自試一試

定義和用法

one() 方法為被選元素附加一個或多個事件處理程式,並規定當事件發生時執行的函式。

當使用 one() 方法時,每個元素只能執行一次事件處理器函式。

當元素遇到錯誤(沒有正確載入)時,發生 error 事件。

error() 方法觸發 error 事件,或規定當發生 error 事件時執行的函式。

提示:該方法是 bind('error', handler) 的簡寫方式。

移除所有 p 元素的事件處理器:

$("button").click(function(){
  $("p").unbind();
});

親自試一試

定義和用法

unbind() 方法移除被選元素的事件處理程式。

該方法能夠移除所有的或被選的事件處理程式,或者當事件發生時終止指定函式的執行。

ubind() 適用於任何通過 jQuery 附加的事件處理程式。

當用戶點選連結離開本頁時,彈出一個訊息框:

$(window).unload(function(){
  alert("Goodbye!");
});

親自試一試

定義和用法

當用戶離開頁面時,會發生 unload 事件。

具體來說,當發生以下情況時,會發出 unload 事件:

  • 點選某個離開頁面的連結
  • 在位址列中鍵入了新的 URL
  • 使用前進或後退按鈕
  • 關閉瀏覽器
  • 重新載入頁面

unload() 方法將事件處理程式繫結到 unload 事件。

unload() 方法只應用於 window 物件。