（4）jQuery篇 —— jQuery的事件與事件對象①

標籤：調用   通過   hang   事件處理   任務   javascrip   滾動   變數   文本   

對於事件，大家肯定是不陌生的。jQuery的事件與JavaScript的事件是一樣的，只不過呢，jQuery將跨瀏覽器的事件做了封裝，大家就只管用，不用寫一堆邏輯判斷那些噁心的跨瀏覽器的差異了。

1. 事件

（1） blur([[data],fn]) ：當元素失去焦點時觸發 blur 事件。這個函數會調用執行綁定到blur事件的所有函數，包括瀏覽器的預設行為。可以通過返回false來防止觸發瀏覽器的預設行為。blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的。

（2） change([[data],fn]) ：當元素的值發生改變時，會發生 change 事件。該事件僅適用於文本域（text field），以及 textarea 和 select 元素。當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生。

（3） click([[data],fn]) ：觸發每一個匹配元素的click事件。這個函數會調用執行綁定到click事件的所有函數。

（4） dblclick([[data],fn]) ：當雙擊元素時，會發生 dblclick 事件。當滑鼠指標停留在元素上方，然後按下並鬆開滑鼠左鍵時，就會發生一次 click。在很短的時間內發生兩次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件應用於同一元素，可能會產生問題。

（5） error([[data],fn]) ： 當元素遇到錯誤（沒有正確載入）時，發生 error 事件。

（6） focus([[data],fn]) ：當元素獲得焦點時，觸發 focus 事件。可以通過滑鼠點擊或者鍵盤上的TAB導航觸發。這將觸發所有綁定的focus函數，注意，某些對象不支援focus方法。

（7） focusin([data],fn) ：當元素獲得焦點時，觸發 focusin 事件。focusin事件跟focus事件區別在於，他可以在父元素上檢測子項目擷取焦點的情況。

（8） focusout([data],fn) ：當元素獲得焦點時，觸發 focusout 事件。focusout事件跟blur事件區別在於，他可以在父元素上檢測子項目擷取焦點的情況。

（9） keydown([[data],fn]) ：當鍵盤或按鈕被按下時，發生 keydown 事件。注釋：如果在文件項目上進行設定，則無論元素是否獲得焦點，該事件都會發生。

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

（11） keyup([[data],fn]) ： 當按鈕被鬆開時，發生 keyup 事件。它發生在當前獲得焦點的元素上。注釋：如果在文件項目上進行設定，則無論元素是否獲得焦點，該事件都會發生。

（12） mousedown([[data],fn]) ：當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件。mousedown 與 click 事件不同，mousedown 事件僅需要按鍵被按下，而不需要鬆開即可發生。

（13） mouseenter([[data],fn]) ：當滑鼠指標穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。與 mouseover 事件不同，只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。如果滑鼠指標穿過任何子項目，同樣會觸發 mouseover 事件。

（14） mouseleave([[data],fn]) ：當滑鼠指標離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。與 mouseout 事件不同，只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。如果滑鼠指標離開任何子項目，同樣會觸發 mouseout 事件。

（15） mousemove([[data],fn]) ：當滑鼠指標在指定的元素中移動時，就會發生 mousemove 事件。mousemove事件處理函數會被傳遞一個變數——事件對象，其.clientX 和 .clientY 屬性代表滑鼠的座標。

（16） mouseout([[data],fn]) ：當滑鼠指標從元素上移開時，發生 mouseout 事件。該事件大多數時候會與 mouseover 事件一起使用。

（17） mouseover([[data],fn]) ：當滑鼠指標位於元素上方時，會發生 mouseover 事件。該事件大多數時候會與 mouseout 事件一起使用。

（18） mouseup([[data],fn]) ：當在元素上放鬆滑鼠按鍵時，會發生 mouseup 事件。與 click 事件不同，mouseup 事件僅需要放鬆按鈕。當滑鼠指標位於元素上方時，放鬆滑鼠按鍵就會觸發該事件。

（19） resize([[data],fn]) ： 當調整瀏覽器視窗的大小時，發生 resize 事件。

（20） scroll([[data],fn]) ： 當使用者滾動指定的元素時，會發生 scroll 事件。scroll 事件適用於所有可滾動的元素和 window 對象（瀏覽器視窗）。

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

（22） submit([[data],fn]) ：當提交表單時，會發生 submit 事件。該事件只適用於表單元素。

（23） unload([[data],fn])  ： 在當使用者離開頁面時，會發生 unload 事件。

2. 事件切換

（1） hover([over,]out) ： 一個模仿懸停事件（滑鼠移動到一個對象上面及移出這個對象）的方法。這是一個自訂的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函數。當滑鼠移出這個元素時，會觸發指定的第二個函數。而且，會伴隨著對滑鼠是否仍然處在特定元素中的檢測（例如，處在div中的映像），是，則會繼續保持“懸停”狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。

over:滑鼠移到元素上要觸發的函數

out:滑鼠移出元素要觸發的函數

（2） toggle([speed],[easing],[fn]) ：用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

 

（4）jQuery篇 —— jQuery的事件與事件對象①