《Web前端技術(shù)（HTML5+CSS3+jQuery）》課件-第9章 jQuery事件處理

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

掌握表單相關(guān)事件的使用方法本章架構(gòu)★★★9.1應(yīng)用鼠標事件和鍵盤事件9.2應(yīng)用jQuery操作表單9.3

綜合案例9.1應(yīng)用鼠標事件和鍵盤事件9.1應(yīng)用鼠標事件和鍵盤事件

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

語法：

$(selector).click(function)

參數(shù)說明：function：可選，規(guī)定當click事件發(fā)生時運行的函數(shù)。1鼠標事件9.1應(yīng)用鼠標事件和鍵盤事件（2）雙擊事件

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

語法：

$(selector).dblclick(function)

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

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

語法：

$(selector).mouseenter(function)

參數(shù)說明：function：可選。規(guī)定mouseenter事件觸發(fā)時運行的函數(shù)。

1鼠標事件9.1應(yīng)用鼠標事件和鍵盤事件

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

mouseenter

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

語法：

$(selector).mouseleave(function)

參數(shù)說明：function：可選。規(guī)定當發(fā)生mouseleave事件時運行的函數(shù)。

1鼠標事件9.1應(yīng)用鼠標事件和鍵盤事件

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

鍵盤事件方法描述執(zhí)行時機keydown()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keydown事件按下鍵盤時keyup()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keyup事件釋放按鍵時keypress()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keypress事件產(chǎn)生可打印的字符時9.2應(yīng)用jQuery操作表單9.2應(yīng)用jQuery操作表單（1）

focus()方法

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

語法：

$(selector).focus(function)

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

focus()

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

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

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

語法：

$(selector).select(function)

參數(shù)說明：

function：select事件的處理函數(shù)。3選擇事件9.2應(yīng)用jQuery操作表單

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

語法：

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

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

綜合案例9.3

綜合案例“信息技術(shù)學院專業(yè)介紹”網(wǎng)頁綜合案例，

編寫網(wǎng)頁，實現(xiàn)展示專業(yè)內(nèi)容的效果。網(wǎng)頁運行效果如圖所示。9.3

綜合案例

當鼠標移到專業(yè)目錄的