jQuery 事件方法

事件是Web應(yīng)用程序可以檢測到的操作。

jQuery提供了將事件處理程序附加到選擇的簡單方法。

發(fā)生事件時(shí)，將執(zhí)行提供的函數(shù)。

以下是示例事件：

• 網(wǎng)頁加載

• 點(diǎn)擊一個(gè)元素

• 將鼠標(biāo)移到元素上

• 提交HTML表格

• 鍵盤上的按鍵等

事件方法的jQuery語法

在jQuery中，大多數(shù)DOM事件具有等效的jQuery方法。

要將點(diǎn)擊事件分配給頁面上的所有段落，請(qǐng)執(zhí)行以下操作：

$("p").click();

下一步是定義事件發(fā)生時(shí)應(yīng)發(fā)生的情況。您必須將一個(gè)函數(shù)傳遞給事件：

$("p").click(function(){
  // 需要執(zhí)行的動(dòng)作...
  });

此示例在單擊頁面時(shí)隱藏頁面上的段落：

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

本示例將一個(gè)“changeSize”函數(shù)附加到click事件：

$(document).ready(function(){
  $("p").click(changeSize);
});

function changeSize() {
  $(this).animate({fontSize: "+=5px"});
}

常用的jQuery事件方法

$（document）.ready()

jQuery $(document).ready()方法指定在DOM完全加載時(shí)要執(zhí)行的函數(shù)。

以下示例在加載DOM時(shí)顯示一條消息：

$(document).ready(function(){
  $("p").text("現(xiàn)在已經(jīng)加載了DOM，可以對(duì)其進(jìn)行操作.");
});

click()

jQuery click()方法將事件處理程序函數(shù)附加到所選元素。

當(dāng)用戶單擊該元素時(shí)，將執(zhí)行該函數(shù)：

$("p").click(function(){
  $(this).css({"background-color":"#007FFF", "color":"white"});
});

mouseenter()

jQuery mouseenter()方法將事件處理程序函數(shù)附加到所選元素。

當(dāng)鼠標(biāo)指針進(jìn)入該元素時(shí)，將執(zhí)行該函數(shù)：

$("p").mouseenter(function(){
  $(this).css("background-color", "yellow");
});

mouseleave()

jQuery mouseleave()方法將事件處理程序函數(shù)附加到所選元素。

當(dāng)鼠標(biāo)指針離開該元素時(shí)，將執(zhí)行該函數(shù)：

$("p").mouseleave(function(){
  $(this).css("background-color", "lightblue");
});

mousedown()

jQuery mousedown()方法將事件處理程序函數(shù)附加到所選元素。

當(dāng)用戶在元素上按下鼠標(biāo)按鈕時(shí)，將執(zhí)行該函數(shù)：

$("p").mousedown(function(){
  $(this).after("<p style='color:red;'>按下鼠標(biāo)鍵</p>");
});

mouseup()

jQuery mouseup()方法將事件處理程序函數(shù)附加到所選元素。

當(dāng)鼠標(biāo)懸停在該元素上時(shí)，釋放鼠標(biāo)按鈕，將執(zhí)行該函數(shù)：

$("p").mouseup(function(){
  $(this).after("<p style='color:green;'>釋放鼠標(biāo)鍵</p>");
});

keydown()

jQuery keydown()方法將事件處理程序函數(shù)附加到所選元素。

當(dāng)用戶按下鍵盤上的鍵時(shí)，將執(zhí)行該函數(shù)：

$("input").keydown(function(event){
  $(this).css("background-color", "yellow");
  $("span").text(event.type);
});

keyup()

jQuery keyup()方法將事件處理程序函數(shù)附加到所選元素。

當(dāng)用戶釋放鍵盤上的鍵時(shí)，將執(zhí)行該函數(shù)：

$("input").keyup(function(event){
  $(this).css("background-color", "lightblue");
  $("span").text(event.type);
});

hover（）

jQuery hover()方法具有兩個(gè)函數(shù)，并且是mouseenter()和mouseleave()方法的組合。

下面的示例將鼠標(biāo)指針懸停在上方時(shí)更改所有<p>元素的背景顏色：

$("p").hover(function(){
  $(this).css("background-color", "yellow");
  }, function(){
  $(this).css("background-color", "lightblue");
});

on()方法

jQuery提供了on()一種方法來響應(yīng)所選元素上的任何事件。

使用on()方法，我們可以為所選元素附加一個(gè)或多個(gè)事件處理程序。

下面的示例將click事件附加到所有<p>元素：

$("p").on("click", function(){
  $(this).css("background-color", "coral");
});

下面的示例將mouseenter事件附加到所有<p>元素：

$("p").on("mouseenter", function(){
  $(this).css("background-color", "coral");
});

以下示例將多個(gè)事件處理程序附加到<div>元素：

$("div").on("mouseenter mouseleave click", function(){
  $(this).text(Math.random());
});

off()方法

jQuery off()  方法刪除該on()方法附帶的一個(gè)或多個(gè)事件處理程序。

下面的示例從<div>元素中刪除mousemove事件：

$("button").click(function(){
  $("div").off("mousemove");
});

事件對(duì)象

jQuery的事件系統(tǒng)根據(jù)W3C標(biāo)準(zhǔn)標(biāo)準(zhǔn)化事件對(duì)象。

確保將事件對(duì)象傳遞給事件處理程序。

每個(gè)事件處理函數(shù)都會(huì)接收一個(gè)事件對(duì)象，其中包含許多屬性和方法。

$("div").on("click", function(event){
  alert("Event type is " + event.type);
  alert("Target : " + event.target.innerHTML);
});

下表顯示了所有事件對(duì)象的方法和屬性：

jQuery事件參考

有關(guān)完整的事件參考，請(qǐng)?jiān)L問我們的jQuery Events 參考手冊(cè)。