jQuery中的事件（七）

1. ready(fn), 當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數

這個方法純粹是對向window.load事件注冊事件的替代方法。通過使用這個方法，可以在DOM載入就緒能夠讀取并操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。

在DOM加載完成時運作的代碼，可以這樣寫

$(document).ready(function(){
  // 在這裡寫你的代碼...
});

使用 $(document).ready() 的簡寫，同時内部的 jQuery 代碼依然使用 $ 作為别名，而不管全局的 $ 為何。

$(function($) {
  // 你可以在這裡繼續使用$作為别名...
});

2. submit([[data],fn]), 當送出表單時，會發生 submit 事件

該事件隻适用于表單元素。

參數說明：

fn：在每一個比對元素的submit事件中綁定的處理函數
[data],fn
- data：submit([Data], fn) 可傳入data供函數fn處理

$("form:first").submit();

//阻止表單送出
$("form").submit( function () {
  return false;
} );

3. select([[data],fn]), 當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件

這個函數會調用執行綁定到select事件的所有函數，包括浏覽器的預設行為。可以通過在某個綁定的函數中傳回false來防止觸發浏覽器的預設行為。

fn：在每一個比對元素的select事件中綁定的處理函數
[data], fn
- data：select([Data], fn) 可傳入data供函數fn處理

//觸發所有input元素的select事件
$("input").select();
//當文本框中文本被選中時執行的函數
$(":text").select( function () { /* ...do something... */ } );

4. scroll([[data],fn]), 當使用者滾動指定的元素時，會發生 scroll 事件

scroll 事件适用于所有可滾動的元素和 window 對象（浏覽器視窗）。

fn：在每一個比對元素的scroll事件中綁定的處理函數
- data：scroll([Data], fn) 可傳入data供函數fn處理。
- fn：在每一個比對元素的scroll事件中綁定的處理函數。

//當頁面滾動條變化時，執行的函數
$(window).scroll( function() { /* ...do something... */ } );

//對元素滾動的次數進行計數
$("div").scroll(function() {
  $("span").text(x+=1);
});

5. resize([[data],fn]), 當調整浏覽器視窗的大小時，發生 resize 事件

fn：在每一個比對元素的resize事件中綁定的處理函數
- data：resize([Data], fn) 可傳入data供函數fn處理。
- fn：在每一個比對元素的resize事件中綁定的處理函數。

//讓人每次改變頁面視窗的大小時很郁悶的方法
$(window).resize(function(){
  alert("Stop it!");
});

//對浏覽器視窗調整大小進行計數
$(window).resize(function() {
  $('span').text(x+=1);
});

6. mouseup([[data],fn]), 當在元素上放松滑鼠按鈕時，會發生 mouseup 事件

與 click 事件不同，mouseup 事件僅需要放松按鈕。當滑鼠指針位于元素上方時，放松滑鼠按鈕就會觸發該事件。

fn：在每一個比對元素的mouseup事件中綁定的處理函數
- data：mouseup([Data], fn) 可傳入data供函數fn處理。
- fn：在每一個比對元素的mouseup事件中綁定的處理函數。

//當松開滑鼠按鈕時，隐藏或顯示元素
$("button").mouseup(function(){
  $("p").slideToggle();
});

類似的還有：

mouseout([[data],fn])：當滑鼠指針從元素上移開時，發生 mouseout 事件
mousemove([[data],fn])：當滑鼠指針在指定的元素中移動時，就會發生 mousemove 事件
mouseover([[data],fn])：當滑鼠指針位于元素上方時，會發生 mouseover 事件
mouseleave([[data],fn])：當滑鼠指針離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。與 mouseout 事件不同，隻有在滑鼠指針離開被選元素時，才會觸發 mouseleave 事件。如果滑鼠指針離開任何子元素，同樣會觸發 mouseout 事件。
mouseenter([[data],fn])：當滑鼠指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。與 mouseover 事件不同，隻有在滑鼠指針穿過被選元素時，才會觸發 mouseenter 事件。如果滑鼠指針穿過任何子元素，同樣會觸發 mouseover 事件。
mousedown([[data],fn])：當滑鼠指針移動到元素上方，并按下滑鼠按鍵時，會發生 mousedown 事件。mousedown 與 click 事件不同，mousedown 事件僅需要按鍵被按下，而不需要松開即可發生。

7. keyup([[data],fn]), 當按鈕被松開時，發生 keyup 事件。它發生在目前獲得焦點的元素上

注釋：如果在文檔元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。

fn：在每一個比對元素的keyup事件中綁定的處理函數
- data：keyup([Data], fn) 可傳入data供函數fn處理。
- fn：在每一個比對元素的keyup事件中綁定的處理函數。

//當按下按鍵時，改變文本域的顔色
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

keypress([[data],fn])：當鍵盤或按鈕被按下時，發生 keypress 事件。keypress 事件與 keydown 事件類似。當按鈕被按下時，會發生該事件。它發生在目前獲得焦點的元素上。不過，與 keydown 事件不同，每插入一個字元，就會發生 keypress 事件。注釋：如果在文檔元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。
keydown([[data],fn])：當鍵盤或按鈕被按下時，發生 keydown 事件。如果在文檔元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。

8. focusout([data],fn), 當元素失去焦點時觸發 focusout 事件

focusout事件跟blur事件差別在于，他可以在父元素上檢測子元素失去焦點的情況。

focusin([data],fn)：當元素獲得焦點時，觸發 focusin 事件。focusin事件跟focus事件差別在于，他可以在父元素上檢測子元素擷取焦點的情況。
focus([[data],fn])：當元素獲得焦點時，觸發 focus 事件。可以通過滑鼠點選或者鍵盤上的TAB導航觸發。這将觸發所有綁定的focus函數，注意，某些對象不支援focus方法。
focus([[data],fn])：當元素獲得焦點時，觸發 focus 事件。可以通過滑鼠點選或者鍵盤上的TAB導航觸發。這将觸發所有綁定的focus函數，注意，某些對象不支援focus方法

9. dblclick([[data],fn]), 當輕按兩下元素時，會發生 dblclick 事件

當滑鼠指針停留在元素上方，然後按下并松開滑鼠左鍵時，就會發生一次 click。在很短的時間内發生兩次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件應用于同一進制素，可能會産生問題。

$("p").dblclick( function () { alert("Hello World!"); });

10. click([data],fn]), 觸發每一個比對元素的click事件

data：click([Data], fn) 可傳入data供函數fn處理。
fn：在每一個比對元素的click事件中綁定的處理函數。

$("p").click();

11. change([data],fn]), 當元素的值發生改變時，會發生 change 事件

該事件僅适用于文本域（text field），以及 textarea 和 select 元素。當用于 select 元素時，change 事件會在選擇某個選項時發生。當用于 text field 或 text area 時，該事件會在元素失去焦點時發生。

data：change([Data], fn) 可傳入data供函數fn處理。
fn：在每一個比對元素的change事件中綁定的處理函數。

$(selector).change();

$("input[type='text']").change( function() {
  // 這裡可以寫些驗證代碼
});

12. blur([data],fn]), 當元素失去焦點時觸發 blur 事件

這個函數會調用執行綁定到blur事件的所有函數，包括浏覽器的預設行為。可以通過傳回false來防止觸發浏覽器的預設行為。blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的。

data：blur([Data], fn) 可傳入data供函數fn處理。
fn：在每一個比對元素的blur事件中綁定的處理函數。

$("p").blur();

$("p").blur( function () { alert("Hello World!"); } );

13. toggle([speed],[easing],[fn]), 用于綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件

如果元素是可見的，切換為隐藏的；如果元素是隐藏的，切換為可見的。

1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate（遷移）插件可以恢複此功能。

[speed] [,fn]

- speed: 隐藏/顯示效果的速度。預設是 "0"毫秒。可能的值：slow，normal，fast。"
- fn:在動畫完成時執行的函數，每個元素執行一次。
- speed：隐藏/顯示效果的速度。預設是 "0"毫秒。可能的值：slow，normal，fast。"
- easing：(Optional) 用來指定切換效果，預設是"swing"，可用參數"linear"
- fn：在動畫完成時執行的函數，每個元素執行一次。
switch
- 用于确定顯示/隐藏的開關。如：true - 顯示元素，false - 隐藏元素

$('td).toggle();

$("p").toggle("slow");


$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

$('#foo').toggle(showOrHide);

//相當于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}

14. hover([over,]out), 模仿懸停事件（滑鼠移動到一個對象上面及移出這個對象）的方法

滑鼠移動到一個比對的元素上面時，會觸發指定的第一個函數。當滑鼠移出這個元素時，會觸發指定的第二個函數。而且，會伴随着對滑鼠是否仍然處在特定元素中的檢測（例如，處在div中的圖像），如果是，則會繼續保持“懸停”狀态，而不觸發移出事件

over,out
- over:滑鼠移到元素上要觸發的函數
- out:滑鼠移出元素要觸發的函數

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

15. triggerHandler(type, [data]), 觸發指定的事件類型上所有綁定的處理函數

這個方法的行為表現與trigger類似，但有以下三個主要差別：

不會觸發浏覽器預設事件, 也不會産生事件冒泡
隻觸發jQuery對象集合中第一個元素的事件處理函數
傳回的是事件處理函數的傳回值，而不是據有可鍊性的jQuery對象。此外，如果最開始的jQuery對象集合為空，則這個方法傳回 undefined 。

type,[data] String,Array

- type:要觸發的事件類型
- data:傳遞給事件處理函數的附加參數

//如果你對一個focus事件執行了 .triggerHandler() ，浏覽器預設動作将不會被觸發，隻會觸發你綁定的動作。
//html代碼
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>

//jquery代碼
$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){
  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

16. trigger(type,[data]), 在每一個比對的元素上觸發某類事件

這個函數也會導緻浏覽器同名的預設行為的執行。比如，如果用trigger()觸發一個'submit'，則同樣會導緻浏覽器送出表單。如果要阻止這種預設行為，應傳回false。

type,[data] String|Event,Array
- type：一個事件對象或者要觸發的事件類型；Event 是事件發生時運作的函數
- data：傳遞給事件處理函數的附加參數

//送出第一個表單，但不用submit()
$("form:first").trigger("submit")

//給一個事件傳遞參數
$("p").click( function (event, a, b) {
  // 一個普通的點選事件時，a和b是undefined類型
  // 如果用下面的語句觸發，那麼a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

//下面的代碼可以顯示一個"Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

17. one(type,[data],fn), 為每一個比對元素的特定事件（像click）綁定一個一次性的事件處理函數

在每個對象上，這個事件處理函數隻會被執行一次。

這個事件處理函數會接收到一個事件對象，可以通過它來阻止（浏覽器）預設的行為。如果既想取消預設的行為，又想阻止事件起泡，這個事件處理函數必須傳回false。

type,[data],fn String,Object,Function
- type：添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
- data：将要傳遞給事件處理函數的資料映射
- fn：每當事件觸發時執行的函數。

//當所有段落被第一次點選的時候，顯示所有其文本。
$("p").one("click", function(){
  alert( $(this).text() );
});

18. off(events,[selector],[fn]), 選擇元素上移除一個或多個事件的事件處理函數 v1.7

$("p").off()

$("p").off( "click", "**" )

時刻與技術進步，每天一點滴，日久一大步！！！

本部落格隻為記錄，用于學習，如有冒犯，請私信于我。

jQuery中的事件（七）

繼續閱讀

PAT (Advanced Level) Practise 1065 A+B and C (64bit) (20)

POJ 3093 Margaritas on the River Walk

HDU 1010 Tempter of the Bone

TYVJ-P1035 棋盤覆寫

CodeForces 18E Flag 2

PAT (Advanced Level) Practise 1024 Palindromic Number (25)

使用try-with-resources優雅關閉資源

【FPGA實作GA】基于FPGA的GA優化算法的設計與實作

解決方案之：DM relay 處理單元報錯

Perl與網絡監控

PAT (Advanced Level) Practise 1131 Subway Map (30)

ZOJ 3938 Defuse the Bomb

CSU 1565 Word Cloud

ZOJ 3700 Ever Dream

ZOJ 1199 Point of Intersection

CSU 1567 Reverse Rot