jQuery 事件方法
jQuery 專門用於響應 HTML 頁面的事件。
什麼是事件？
網頁可以響應的各種訪問者操作都稱為事件。
事件代表發生某事的精確時刻。
示例
- 滑鼠移動到某個元素上
- 選擇一個單選按鈕
- 點選某個元素
事件經常使用 “觸發/觸發” 這個詞。例如：“按鍵事件在按下某個鍵的瞬間觸發”。
以下是一些常見的 DOM 事件
| 滑鼠事件 | 鍵盤事件 | 表單事件 | 文件/視窗事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery 事件方法語法
在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
要為頁面上的所有段落分配一個點選事件，您可以這樣做：
$("p").click();
下一步是定義當事件觸發時應該發生什麼。您必須將一個函式傳遞給該事件。
$("p").click(function(){
// 操作放在這裡！！
});
常用 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允許我們在文件完全載入時執行一個函式。此事件已在 jQuery 語法章節中進行了解釋。
click()
click() 方法將事件處理函式附加到 HTML 元素。
當用戶單擊 HTML 元素時，該函式將被執行。
以下示例表示：當點選一個 <p> 元素時；隱藏當前的 <p> 元素。
dblclick()
dblclick() 方法將事件處理函式附加到 HTML 元素。
當用戶雙擊 HTML 元素時，該函式將被執行。
mouseenter()
mouseenter() 方法將事件處理函式附加到 HTML 元素。
當滑鼠指標進入 HTML 元素時，該函式將被執行。
mouseleave()
mouseleave() 方法將事件處理函式附加到 HTML 元素。
當滑鼠指標離開 HTML 元素時，該函式將被執行。
mousedown()
mousedown() 方法將事件處理函式附加到 HTML 元素。
當滑鼠在 HTML 元素上按下左鍵、中鍵或右鍵時，該函式將被執行。
mouseup()
mouseup() 方法將事件處理函式附加到 HTML 元素。
當滑鼠在 HTML 元素上釋放左鍵、中鍵或右鍵時，該函式將被執行。
hover()
hover() 方法接受兩個函式，是 mouseenter() 和 mouseleave() 方法的組合。
第一個函式在滑鼠進入 HTML 元素時執行，第二個函式在滑鼠離開 HTML 元素時執行。
示例
$("#p1").hover(function(){
alert("你進入了 p1！");
},
function(){
alert("再見！你現在離開了 p1！");
});
自己動手試一試 »
focus()
focus() 方法將事件處理函式附加到 HTML 表單欄位。
當表單欄位獲得焦點時，該函式將被執行。
blur()
blur() 方法將事件處理函式附加到 HTML 表單欄位。
當表單欄位失去焦點時，該函式將被執行。
on() 方法
on() 方法為選定的元素附加一個或多個事件處理程式。
向 <p> 元素附加一個點選事件
向 <p> 元素附加多個事件處理程式
示例
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
自己動手試一試 »
jQuery 練習
jQuery 事件方法
有關完整的 jQuery 事件參考，請參閱我們的 jQuery 事件參考。
