jQuery 事件

jQuery 是為事件處理特別設計的。

什麼是事件？

頁面對不同訪問者的響應叫做事件。

事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。

例項：

  • 在元素上移動滑鼠。
  • 選取單選按鈕
  • 點選元素

在事件中經常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。

常見 DOM 事件：

滑鼠事件 鍵盤事件 表單事件 文件/視窗事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload
hover      

jQuery 事件方法語法

在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。

頁面中指定一個點選事件：

$("p").click();

下一步是定義什麼時間觸發事件。您可以通過一個事件函式實現：

$("p").click(function(){ // 動作觸發後執行的程式碼!! });

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允許我們在文件完全載入完後執行函式。該事件方法在 jQuery 語法 章節中已經提到過。

click()

click() 方法是當按鈕點選事件被觸發時會呼叫一個函式。

該函式在使用者點選 HTML 元素時執行。

在下面的例項中，當點選事件在某個 <p> 元素上觸發時，隱藏當前的 <p> 元素：

例項

$("p").click(function(){ $(this).hide(); });

嘗試一下 ?

dblclick()

當雙擊元素時，會發生 dblclick 事件。

dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時執行的函式：

例項

$("p").dblclick(function(){ $(this).hide(); });

嘗試一下 ?

mouseenter()

當滑鼠指標穿過元素時，會發生 mouseenter 事件。

mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時執行的函式：

例項

$("#p1").mouseenter(function(){ alert('您的滑鼠移到了 id="p1" 的元素上!'); });

嘗試一下 ?

mouseleave()

當滑鼠指標離開元素時，會發生 mouseleave 事件。

mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時執行的函式：

例項

$("#p1").mouseleave(function(){ alert("再見，您的滑鼠離開了該段落。"); });

嘗試一下 ?

mousedown()

當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件。

mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時執行的函式：

例項

$("#p1").mousedown(function(){ alert("滑鼠在該段落上按下！"); });

嘗試一下 ?

mouseup()

當在元素上鬆開滑鼠按鈕時，會發生 mouseup 事件。

mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時執行的函式：

例項

$("#p1").mouseup(function(){ alert("滑鼠在段落上鬆開。"); });

嘗試一下 ?

hover()

hover()方法用於模擬游標懸停事件。

當滑鼠移動到元素上時，會觸發指定的第一個函式(mouseenter);當滑鼠移出這個元素時，會觸發指定的第二個函式(mouseleave)。

例項

$("#p1").hover( function(){ alert("你進入了 p1!"); }, function(){ alert("拜拜! 現在你離開了 p1!"); } );

嘗試一下 ?

focus()

當元素獲得焦點時，發生 focus 事件。

當通過滑鼠點選選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

focus() 方法觸發 focus 事件，或規定當發生 focus 事件時執行的函式：

例項

$("input").focus(function(){ $(this).css("background-color","#cccccc"); });

嘗試一下 ?

blur()

當元素失去焦點時，發生 blur 事件。

blur() 方法觸發 blur 事件，或規定當發生 blur 事件時執行的函式：

例項

$("input").blur(function(){ $(this).css("background-color","#ffffff"); });

嘗試一下 ?