全面了解jQuery中的事件

本文由Wern Ancheta和Camilo Reyes共同評審。感謝所有SitePoint的同行評審員，使SitePoint的內容達到最佳狀態！

jQuery能夠捕捉網頁中幾乎所有用戶交互行為，將其定義為事件。事件的重要性在於，它們允許您根據用戶的操作做出相應的響應。例如，您可以編寫代碼，根據按鈕點擊或滾動事件來更改網頁的背景顏色。

jQuery有很多快捷方法，例如contextmenu()、hover()和keyup()，用於處理不同的事件。除了專用方法外，jQuery還提供了一個通用的on方法，允許您為任何事件附加處理程序：on('eventName', handler)。請記住，這些方法只是標準DOM事件的包裝器，您可以在純JavaScript中為這些事件添加處理程序。

本教程將快速瀏覽所有這些事件方法（分為五大類），並討論使用它們時的最佳實踐。

關鍵要點

• jQuery事件捕獲用戶交互，從而實現響應式和交互式Web應用程序。使用像.on()這樣的方法來附加事件處理程序。
• jQuery中的瀏覽器事件包括處理錯誤、調整窗口大小和滾動，其中較新版本中某些特定方法已棄用，強調使用.on('eventName', handler)'。
• 文檔加載事件確保腳本僅在DOM完全準備好後運行，避免與未初始化元素相關的錯誤。
• jQuery中的鍵盤和鼠標事件可處理各種交互，從按鍵到鼠標移動，方法包括keydown()、keyup()、click()和mousemove()。
• 表單事件處理表單內的用戶輸入和交互，jQuery提供專門的事件來有效地管理焦點、更改和提交。

瀏覽器事件

此類別包含三個事件：error、resize和scroll。當諸如圖像之類的元素加載不正確時，會觸發error事件。自jQuery 1.8版以來，其快捷方法已被棄用，因此您現在應該改用on('error', handler)。

resize事件

每當瀏覽器窗口的大小發生變化時，都會觸發此事件。不同的瀏覽器可以根據實現方式以不同的方式調用resize處理程序。 Internet Explorer和基於WebKit的瀏覽器會連續調用處理程序，而像Opera這樣的瀏覽器只在resize事件結束時調用它。

下面的代碼片段根據窗口寬度交換圖像src。

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

此CodePen演示展示了事件的實際效果：

查看CodePen演示

scroll事件

當用戶滾動到特定元素中的不同位置時，元素可以觸發此事件。除了window對像外，任何帶有滾動條的元素都可以觸發此事件。例如，任何將overflow屬性設置為scroll的元素或任何可滾動的iframe都可以觸發此事件。

請記住，每當滾動位置發生變化時，都會調用處理程序。滾動的起因無關緊要。它可以通過按下箭頭鍵、單擊或拖動滾動條或使用鼠標滾輪來觸發。在下面的代碼中，我們檢查用戶是否向下滾動超過500像素並執行某些操作。

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

在下面的CodePen演示中，如果您繼續滾動並到達接近底部的位置，您應該會看到一個通知，告訴您您幾乎到達了網頁的底部：

查看CodePen演示

文檔加載事件

jQuery有三種方法，這三種方法根據文檔或DOM的狀態被觸發。它們是load、unload和ready。

load()可用於將處理程序附加到加載外部資源（例如圖像、腳本、iframe和window對象本身）的任何元素。當它所附加的元素及其所有子元素完全加載後，該事件就會觸發。當與圖像一起使用時，它會帶來一些問題。首先，它不會正確地向上冒泡DOM樹。第二個問題是它既不可靠也不跨瀏覽器。

當用戶從網頁導航離開時，會觸發unload事件。這可能是因為用戶單擊了鏈接，在地址欄中鍵入了新的URL或關閉了瀏覽器窗口。頁面重新加載也會觸發此事件。請注意，使用preventDefault()不會取消unload事件。此外，大多數瀏覽器都會忽略此事件處理程序內部對alert()、confirm()和prompt()的調用，這意味著下面的代碼將不起作用：

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

自1.8版以來，load()和unload()都已棄用。

ready事件

在大多數情況下，在腳本能夠毫無問題地運行之前，不需要所有元素（如圖像）都完全加載。您需要確保的是DOM層次結構已完全構建。 ready事件為您處理了這一點。僅在DOM準備好後才會運行附加到此事件的任何處理程序。在處理程序內部，您可以運行jQuery代碼或將事件處理程序附加到其他元素，而無需擔心。

下面的CodePen演示加載高分辨率圖像。您會注意到，DOM在圖像完全加載之前就已準備好。

查看CodePen演示

如果您的代碼依賴於某些CSS樣式屬性的值，則應首先在運行它之前提供對相應樣式表或嵌入式樣式的引用。

鍵盤事件

鍵盤事件可以由任何用戶與鍵盤的交互觸發。每個此類事件都將包含有關所按按鍵和事件類型的信息。 jQuery中有三種鍵盤事件快捷方式——keydown()、keyup()和keypress()。

keyup和keydown事件

顧名思義，當用戶釋放鍵盤上的按鍵時，會觸發keyup；當用戶按下鍵盤上的按鍵時，會觸發keydown。這兩個事件的處理程序都可以附加到任何元素，但只有當前具有焦點的元素上的處理程序才會被觸發。

建議使用事件對象的which屬性來確定按下了哪個鍵。這是因為瀏覽器使用不同的屬性來存儲此信息，而jQuery會規範化which屬性以可靠地檢索此信息。

另一件值得記住的事情是，這兩個事件不區分<kbd>a</kbd>和<kbd>shift a</kbd>。在後一種情況下，<kbd>shift</kbd>和<kbd>a</kbd>分別單獨註冊。在下面的代碼中，我向用戶顯示一個警報框，該警報框註冊任何keydown事件。當按下<kbd>y</kbd>鍵時，將從DOM中刪除特定元素。

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

查看CodePen演示

keypress事件

此事件類似於keydown事件。一個主要區別是，修飾符和非打印鍵（如<kbd>Shift</kbd>、<kbd>Esc</kbd>等）不會觸發keypress事件。當我說你不應該使用keypress事件來捕獲特殊按鍵（如箭頭鍵）時，我再怎麼強調也不為過。當您想知道輸入了哪個字符（例如A或a）時，應使用keypress。

下面的代碼片段根據按下的鍵隱藏元素：

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

查看CodePen演示

鼠標事件

當用戶使用指向設備（如鼠標）進行交互時，會觸發鼠標事件。這些事件可以基於點擊（如click、dblclick和contextmenu）或基於移動（如mouseenter、mouseleave和mousemove）。在本節中，我將簡要討論所有這些事件，並包含一些演示來說明它們之間細微的差別。

基於點擊的事件

jQuery中定義了五種基於點擊的事件方法。 mousedown和mouseup事件（從名稱可以看出）分別在用戶按下和釋放鼠標按鈕位於元素上時觸發。另一方面，只有當鼠標按鈕在指定元素上按下並隨後釋放時，才會觸發click事件。

dblclick稍微複雜一些。對於要註冊為dblclick的事件，在某個系統相關的計時間隔過期之前，應該有兩個快速的鼠標點擊。您不應同時將處理程序附加到單個元素的click和dblclick，因為雙擊觸發的事件是特定於瀏覽器的。某些瀏覽器可能會在雙擊之前註冊兩個單次點擊事件，而其他瀏覽器可能只在雙擊之前註冊一個單次點擊事件。

在元素上右鍵單擊後但顯示上下文菜單之前，會觸發contextmenu事件。這意味著您可以使用事件處理程序中的相應代碼來阻止默認上下文菜單顯示。

下面的代碼片段阻止默認上下文菜單在右鍵單擊時顯示，而是顯示自定義菜單：

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

此演示在單擊圖像時將CSS樣式應用於圖像，並具有自定義上下文菜單：

查看CodePen演示

基於移動的事件

某些事件基於鼠標指針在元素上、進入或移出元素的移動。共有六種基於移動的事件方法。

讓我們從mouseover和mouseenter事件開始。顧名思義，當鼠標指針進入元素時，這兩個事件都會觸發。類似地，當鼠標指針離開元素時，mouseleave和mouseout事件會觸發。

mouseleave和mouseout之間的一個區別是，前者僅當鼠標指針移到綁定它的元素之外時才會觸發。另一方面，即使對於該元素的任何後代之外的移動，也會觸發mouseout。 mouseenter和mouseover之間存在完全相同的差異。

查看CodePen演示

讓我們看看基於鼠標移動，mouseenter和mouseover事件計數如何變化。嘗試從右側進入大的藍色框，並在進入右側粉紅色框之前停止。 mouseenter和mouseover現在都應該值為1。如果您向左移動並進入粉紅色框，則mouseover計數將變為2。發生這種情況是因為mouseover事件的事件冒泡。粉紅色框上的mouseover事件“冒泡”到外部藍色框，使mouseover事件的計數增加1。當您進一步向左移動並在兩個粉紅色框之間停止時，mouseover事件會再次觸發。當您到達藍色框的左端時，mouseover事件的計數應為5，而mouseenter事件的計數仍應為1。

可以使用完全相同的推理來解釋mouseleave和mouseout事件的計數。嘗試在不同方向移動，看看計數如何變化。

mousemove和hover事件

當鼠標指針在元素內移動時，會觸發mousemove事件。只要有鼠標移動，即使它小到一個像素，它都會觸發。因此，在很短的時間內可以觸發數百個事件。正如您可以想像的那樣，在事件處理程序中執行複雜操作會導致瀏覽器滯後。建議使mousemove事件處理程序盡可能高效，並在不再需要時取消綁定它。

hover僅當鼠標指針進入或離開元素時才會觸發。調用hover方法有兩種方法。第一種是：

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

在這裡，當鼠標指針進入元素時執行handlerIn()，當鼠標指針離開元素時執行handlerOut()。第二種方法是：

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

這次，相同的handlerInOut函數在進入和離開元素時都會執行。

查看CodePen演示

注意：此演示使用CSS濾鏡效果，IE不支持。

表單事件

表單在網絡上無處不在。幾乎每個用戶都會在某個時候填寫表單。 jQuery有專門的方法來處理表單事件。這些事件可以在值更改或失去焦點時觸發。共有七個表單事件，我們將逐一討論它們。

blur、focus、focusin和focusout事件

每當元素獲得焦點時，都會觸發focus事件。它僅適用於表單元素和錨點標記。要觸發任何其他元素上的焦點，您需要設置元素的tabindex屬性。請記住，在Internet Explorer中，將焦點設置在隱藏元素上會導致錯誤。如果您必須在不顯式設置焦點的情況下觸發focus事件，您可以調用triggerHandler("focus")方法。

每當元素失去焦點時，都會觸發blur事件。在較舊的瀏覽器中，此事件僅適用於表單元素。

與focus事件不同，每當任何元素或其後代獲得焦點時，都會觸發focusin。類似地，每當任何元素或其後代失去焦點時，都會觸發focusout。因此，如果您希望事件冒泡，則應使用這兩個事件。

select、change和submit事件

當元素的值發生變化時，會觸發change事件。此事件僅適用於<input>、<select></select>和<textarea></textarea>元素。對於復選框、單選按鈕和選擇框，此事件會在用戶進行任何選擇後立即觸發。在其他元素上，它僅在元素失去焦點後才會觸發。還要注意，如果使用JavaScript更改輸入元素的值，則不會觸發此事件。

當用戶在元素內進行文本選擇時，會觸發select事件。此事件的範圍更有限，僅適用於<input>和<textarea></textarea>元素。如果您想檢索選定的文本，則必須使用跨瀏覽器的jQuery插件。

當用戶嘗試提交表單時，會觸發submit事件。您只能將處理程序附加到表單元素。要觸發此事件，用戶必須單擊<button></button>、<input type="submit">或<input type="image">元素。有趣的是，JavaScript submit事件在Internet Explorer中不會冒泡。但是，自jQuery 1.4版以來，此行為已在瀏覽器中標準化。

查看CodePen演示

jQuery 3中的更改

自jQuery 1.8版以來，load、error和unload方法已被棄用。 load()方法本質上是不明確的。此方法可能意味著AJAX加載或實際觸發的load事件。類似地，error方法也可能與jQuery.error()方法混淆。現在在jQuery 3中，這些方法最終已被刪除。您現在必須使用on方法來註冊這些事件偵聽器。

最後的想法

在本文中，我已經介紹了所有主要的jQuery事件方法以及類似事件之間的區別。知道何時使用keypress而不是keydown可以幫助您避免麻煩並節省寶貴的時間。儘管可以使用純JavaScript連接到DOM事件，但jQuery確實在後台對跨瀏覽器差異進行了一些規範化，這取決於您的網站/應用程序必須支持哪些瀏覽器，這可能是一個優勢。

要了解更多關於事件的信息，您可以訪問官方jQuery文檔。如果您有任何關於在jQuery中使用事件的問題或技巧，請發表評論。

jQuery事件的常見問題解答 (FAQ)

如何阻止jQuery中的事件冒泡？

在jQuery中，您可以使用event.stopPropagation()方法阻止事件向上冒泡DOM樹。此方法可防止事件傳播到父元素。需要注意的是，它不會阻止任何默認行為發生；它只是阻止事件冒泡。以下是如何使用它的示例：

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

jQuery中的.bind()和.live()方法有什麼區別？

jQuery中的.bind()和.live()方法都用於將事件處理程序附加到元素。它們之間的主要區別在於.bind()僅將處理程序附加到當前元素，而.live()將處理程序附加到當前元素和將來與選擇器匹配的所有元素。但是，值得注意的是，自jQuery 1.7起.live()方法已被棄用，並在jQuery 1.9中被刪除。您應該改用.on()方法。

如何在jQuery中以編程方式觸發事件？

您可以使用.trigger()方法以編程方式在jQuery中觸發事件。此方法允許您手動觸發元素上的指定事件。這是一個例子：

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

jQuery中的事件委託是什麼，為什麼它有用？

jQuery中的事件委託是一種技術，您將事件的處理委託給父元素，而不是將事件處理程序綁定到各個元素。當您有大量需要類似事件處理程序的元素，或者當您動態地將元素添加到DOM時，這尤其有用。它通過減少需要綁定的事件處理程序的數量來提高性能。

如何阻止jQuery中事件的默認操作？

您可以使用event.preventDefault()方法阻止jQuery中事件的默認操作。此方法可阻止事件的默認操作發生。例如，它可以阻止鏈接跟隨URL。

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

jQuery中的.click()和.on('click')有什麼區別？

jQuery中的.click()方法是.on('click')的簡寫。這兩種方法都將點擊事件處理程序附加到選定的元素。但是，.on()方法提供了更大的靈活性，因為它還可以處理動態添加的元素的事件，並且可以一次處理多個事件。

如何在jQuery中檢測雙擊事件？

您可以使用.dblclick()方法在jQuery中檢測雙擊事件。此方法附加一個函數，該函數在選定元素上發生雙擊事件時執行。這是一個例子：

$(window).unload(function() {
  alert("请不要离开！"); // 不起作用。
});

如何將多個事件綁定到jQuery中的元素？

您可以使用.on()方法將多個事件綁定到jQuery中的元素。此方法允許您將多個事件處理程序附加到選定的元素。這是一個例子：

$("#alert").keydown(function(event) {
  switch (event.which) {
    case 89: // y的键码
      $("#element").remove(); // 从DOM中删除元素
      break;
  }
});

如何在jQuery中取消綁定事件處理程序？

您可以使用.off()方法在jQuery中取消綁定事件處理程序。此方法刪除使用.on()附加的事件處理程序。這是一個例子：

$("body").keypress(function(event) {
  switch (event.keyCode) {
    case 75:
      // 75在keypress事件中代表大写K
      $(".K").css("display", "none");
      break;
  }
});

如何在jQuery中檢測右鍵單擊事件？

您可以使用.contextmenu()方法或通過檢查mousedown事件中事件對象的“which”屬性來檢測jQuery中的右鍵單擊事件。 “which”屬性對於右鍵單擊將為3。這是一個例子：

$("img").contextmenu(function(event) {
  event.preventDefault();
  $("#custom-menu")
    .show().css({
      top: event.pageY + 10,
      left: event.pageX + 10
      // 在鼠标点击附近显示菜单
    });
});

$("#custom-menu #option").click(function() {
   $("img").toggleClass("class-name");
   // 切换图像类。
});

以上是全面了解jQuery中的事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！