第9章jQuery事件處理學習目標123掌握鼠標相關事件的使用方法掌握鍵盤相關事件的使用方法

掌握表單相關事件的使用方法本章架構★★★9.1應用鼠標事件和鍵盤事件9.2應用jQuery操作表單9.3

綜合案例9.1應用鼠標事件和鍵盤事件9.1應用鼠標事件和鍵盤事件

鼠標事件是在用戶移動鼠標光標或者使用任意鼠標鍵點擊時觸發的。click()是當鼠標單擊事件被觸發時調用的一個函數。該函數在用戶點擊HTML元素時執行。與鼠標相關的事件除了單擊觸發的以外，還有鼠標雙擊觸發、鼠標按下時觸發、以及鼠標抬起時觸發。1鼠標事件9.1應用鼠標事件和鍵盤事件（1）單擊事件click事件是當鼠標單擊時會調用的一個函數，該函數在用戶點擊HTML元素時執行。

語法：

$(selector).click(function)

參數說明：function：可選，規定當click事件發生時運行的函數。1鼠標事件9.1應用鼠標事件和鍵盤事件（2）雙擊事件

鼠標雙擊事件為dbclick，它是在用戶完成迅速連續的兩次點擊之后觸發。dblclick()方法觸發dblclick事件，或規定當發生dblclick事件時運行函數。

語法：

$(selector).dblclick(function)

參數說明：function：可選，規定當dblclick事件發生時運行的函數。1鼠標事件9.1應用鼠標事件和鍵盤事件（3）鼠標按下和抬起事件mousedown事件在用戶敲擊鼠標鍵時觸發，跟click事件不一樣，該事件僅在按下鼠標時觸發。mouseup事件在用戶松開鼠標時觸發，如果在與按下鼠標的元素相同元素上松開，那么click事件也會觸發。1鼠標事件9.1應用鼠標事件和鍵盤事件（4）鼠標移入和移出事件

當鼠標指針穿過元素時，會發生mouseenter事件。mouseenter()方法觸發mouseenter事件，或規定當發生mouseenter事件時運行函數。

語法：

$(selector).mouseenter(function)

參數說明：function：可選。規定mouseenter事件觸發時運行的函數。

1鼠標事件9.1應用鼠標事件和鍵盤事件

當鼠標指針離開元素時，會發生mouseleave事件。該事件大多數時候會與

mouseenter

事件一起使用。mouseleave()方法觸發mouseleave事件，或規定當發生mouseleave事件時運行函數。

語法：

$(selector).mouseleave(function)

參數說明：function：可選。規定當發生mouseleave事件時運行的函數。

1鼠標事件9.1應用鼠標事件和鍵盤事件

用戶每次按下或者釋放鍵盤上的鍵時都會產生鍵盤事件。2

鍵盤事件方法描述執行時機keydown()觸發或將函數綁定到指定元素的keydown事件按下鍵盤時keyup()觸發或將函數綁定到指定元素的keyup事件釋放按鍵時keypress()觸發或將函數綁定到指定元素的keypress事件產生可打印的字符時9.2應用jQuery操作表單9.2應用jQuery操作表單（1）

focus()方法

通過鼠標點擊選中元素或通過tab鍵定位到元素時，觸發獲得焦點事件，調用focus()方法。

語法：

$(selector).focus(function)

參數說明：function：元素獲得焦點時觸發的函數。1焦點事件9.2應用jQuery操作表單（2）blur()方法當元素失去焦點時觸發失去焦點事件，調用blur()方法。該方法常與

focus()

方法一起使用。語法：$(selector).blur(function)參數說明：function：可選，規定當blur事件發生時運行的函數。1焦點事件9.2應用jQuery操作表單

change()方法的功能是當元素的值發生改變時觸發函數。change()方法僅適用于表單字段，當用于<select>元素時，change事件會在選擇某個選項時發生。當用于文本輸入類型的<text>或<textarea>時，change事件會在元素失去焦點時發生。語法如下：$(selector).change(function)參數說明：function:可選。規定針對被選元素當change事件發生時運行的函數。2內容改變事件9.2應用jQuery操作表單

當<textarea>或文本類型的<input>元素中的文本被選擇時，會發生select事件。select()方法觸發select事件，或規定當發生select事件時運行的函數。

語法：

$(selector).select(function)

參數說明：

function：select事件的處理函數。3選擇事件9.2應用jQuery操作表單

當提交表單時，會發生submit事件。該事件只適用于表單元素。submit()方法觸發submit事件，或規定當發生submit事件時運行的函數。如果submit事件的處理函數返回false，則不執行提交操作；如果返回true，則執行提交操作。

語法：

$(selector).submit(handler(eventObject))

參數說明：●handler：submit事件的處理函數●eventObject：handler的參數。4表單提交事件9.3

綜合案例9.3

綜合案例“信息技術學院專業介紹”網頁綜合案例，

編寫網頁，實現展示專業內容的效果。網頁運行效果如圖所示。9.3

綜合案例

當鼠標移到專業目錄的