本文由Wern Ancheta和Camilo Reyes共同評審。感謝所有SitePoint的同行評審員，使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)！

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

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

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

關(guān)鍵要點(diǎn)

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

瀏覽器事件

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

resize事件

每當(dāng)瀏覽器窗口的大小發(fā)生變化時，都會觸發(fā)此事件。不同的瀏覽器可以根據(jù)實現(xiàn)方式以不同的方式調(diào)用resize處理程序。Internet Explorer和基于WebKit的瀏覽器會連續(xù)調(diào)用處理程序，而像Opera這樣的瀏覽器只在resize事件結(jié)束時調(diào)用它。

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

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

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

查看CodePen演示

scroll事件

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

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

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

在下面的CodePen演示中，如果您繼續(xù)滾動并到達(dá)接近底部的位置，您應(yīng)該會看到一個通知，告訴您您幾乎到達(dá)了網(wǎng)頁的底部：

查看CodePen演示

文檔加載事件

jQuery有三種方法，這三種方法根據(jù)文檔或DOM的狀態(tài)被觸發(fā)。它們是load、unload和ready。

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

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

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內(nèi)的文本。
  }
});

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

ready事件

在大多數(shù)情況下，在腳本能夠毫無問題地運(yùn)行之前，不需要所有元素（如圖像）都完全加載。您需要確保的是DOM層次結(jié)構(gòu)已完全構(gòu)建。ready事件為您處理了這一點(diǎn)。僅在DOM準(zhǔn)備好后才會運(yùn)行附加到此事件的任何處理程序。在處理程序內(nèi)部，您可以運(yùn)行jQuery代碼或?qū)⑹录幚沓绦蚋郊拥狡渌?，而無需擔(dān)心。

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

查看CodePen演示

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

鍵盤事件

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

keyup和keydown事件

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

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

另一件值得記住的事情是，這兩個事件不區(qū)分<kbd>a</kbd>和<kbd>shift a</kbd>。在后一種情況下，<kbd>shift</kbd>和<kbd>a</kbd>分別單獨(dú)注冊。在下面的代碼中，我向用戶顯示一個警報框，該警報框注冊任何keydown事件。當(dāng)按下<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事件。一個主要區(qū)別是，修飾符和非打印鍵（如<kbd>Shift</kbd>、<kbd>Esc</kbd>等）不會觸發(fā)keypress事件。當(dāng)我說你不應(yīng)該使用keypress事件來捕獲特殊按鍵（如箭頭鍵）時，我再怎么強(qiáng)調(diào)也不為過。當(dāng)您想知道輸入了哪個字符（例如A或a）時，應(yīng)使用keypress。

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

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內(nèi)的文本。
  }
});

查看CodePen演示

鼠標(biāo)事件

當(dāng)用戶使用指向設(shè)備（如鼠標(biāo)）進(jìn)行交互時，會觸發(fā)鼠標(biāo)事件。這些事件可以基于點(diǎn)擊（如click、dblclick和contextmenu）或基于移動（如mouseenter、mouseleave和mousemove）。在本節(jié)中，我將簡要討論所有這些事件，并包含一些演示來說明它們之間細(xì)微的差別。

基于點(diǎn)擊的事件

jQuery中定義了五種基于點(diǎn)擊的事件方法。mousedown和mouseup事件（從名稱可以看出）分別在用戶按下和釋放鼠標(biāo)按鈕位于元素上時觸發(fā)。另一方面，只有當(dāng)鼠標(biāo)按鈕在指定元素上按下并隨后釋放時，才會觸發(fā)click事件。

dblclick稍微復(fù)雜一些。對于要注冊為dblclick的事件，在某個系統(tǒng)相關(guān)的計時間隔過期之前，應(yīng)該有兩個快速的鼠標(biāo)點(diǎn)擊。您不應(yīng)同時將處理程序附加到單個元素的click和dblclick，因為雙擊觸發(fā)的事件是特定于瀏覽器的。某些瀏覽器可能會在雙擊之前注冊兩個單次點(diǎn)擊事件，而其他瀏覽器可能只在雙擊之前注冊一個單次點(diǎn)擊事件。

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

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

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

此演示在單擊圖像時將CSS樣式應(yīng)用于圖像，并具有自定義上下文菜單：

查看CodePen演示

基于移動的事件

某些事件基于鼠標(biāo)指針在元素上、進(jìn)入或移出元素的移動。共有六種基于移動的事件方法。

讓我們從mouseover和mouseenter事件開始。顧名思義，當(dāng)鼠標(biāo)指針進(jìn)入元素時，這兩個事件都會觸發(fā)。類似地，當(dāng)鼠標(biāo)指針離開元素時，mouseleave和mouseout事件會觸發(fā)。

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

查看CodePen演示

讓我們看看基于鼠標(biāo)移動，mouseenter和mouseover事件計數(shù)如何變化。嘗試從右側(cè)進(jìn)入大的藍(lán)色框，并在進(jìn)入右側(cè)粉紅色框之前停止。mouseenter和mouseover現(xiàn)在都應(yīng)該值為1。如果您向左移動并進(jìn)入粉紅色框，則mouseover計數(shù)將變?yōu)?。發(fā)生這種情況是因為mouseover事件的事件冒泡。粉紅色框上的mouseover事件“冒泡”到外部藍(lán)色框，使mouseover事件的計數(shù)增加1。當(dāng)您進(jìn)一步向左移動并在兩個粉紅色框之間停止時，mouseover事件會再次觸發(fā)。當(dāng)您到達(dá)藍(lán)色框的左端時，mouseover事件的計數(shù)應(yīng)為5，而mouseenter事件的計數(shù)仍應(yīng)為1。

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

mousemove和hover事件

當(dāng)鼠標(biāo)指針在元素內(nèi)移動時，會觸發(fā)mousemove事件。只要有鼠標(biāo)移動，即使它小到一個像素，它都會觸發(fā)。因此，在很短的時間內(nèi)可以觸發(fā)數(shù)百個事件。正如您可以想象的那樣，在事件處理程序中執(zhí)行復(fù)雜操作會導(dǎo)致瀏覽器滯后。建議使mousemove事件處理程序盡可能高效，并在不再需要時取消綁定它。

hover僅當(dāng)鼠標(biāo)指針進(jìn)入或離開元素時才會觸發(fā)。調(diào)用hover方法有兩種方法。第一種是：

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

在這里，當(dāng)鼠標(biāo)指針進(jìn)入元素時執(zhí)行handlerIn()，當(dāng)鼠標(biāo)指針離開元素時執(zhí)行handlerOut()。第二種方法是：

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內(nèi)的文本。
  }
});

這次，相同的handlerInOut函數(shù)在進(jìn)入和離開元素時都會執(zhí)行。

查看CodePen演示

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

表單事件

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

blur、focus、focusin和focusout事件

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

每當(dāng)元素失去焦點(diǎn)時，都會觸發(fā)blur事件。在較舊的瀏覽器中，此事件僅適用于表單元素。

與focus事件不同，每當(dāng)任何元素或其后代獲得焦點(diǎn)時，都會觸發(fā)focusin。類似地，每當(dāng)任何元素或其后代失去焦點(diǎn)時，都會觸發(fā)focusout。因此，如果您希望事件冒泡，則應(yīng)使用這兩個事件。

select、change和submit事件

當(dāng)元素的值發(fā)生變化時，會觸發(fā)change事件。此事件僅適用于<input>、<select>和<textarea>元素。對于復(fù)選框、單選按鈕和選擇框，此事件會在用戶進(jìn)行任何選擇后立即觸發(fā)。在其他元素上，它僅在元素失去焦點(diǎn)后才會觸發(fā)。還要注意，如果使用JavaScript更改輸入元素的值，則不會觸發(fā)此事件。

當(dāng)用戶在元素內(nèi)進(jìn)行文本選擇時，會觸發(fā)select事件。此事件的范圍更有限，僅適用于<input>和<textarea>元素。如果您想檢索選定的文本，則必須使用跨瀏覽器的jQuery插件。

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

查看CodePen演示

jQuery 3中的更改

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

最后的想法

在本文中，我已經(jīng)介紹了所有主要的jQuery事件方法以及類似事件之間的區(qū)別。知道何時使用keypress而不是keydown可以幫助您避免麻煩并節(jié)省寶貴的時間。盡管可以使用純JavaScript連接到DOM事件，但jQuery確實在后臺對跨瀏覽器差異進(jìn)行了一些規(guī)范化，這取決于您的網(wǎng)站/應(yīng)用程序必須支持哪些瀏覽器，這可能是一個優(yōu)勢。

要了解更多關(guān)于事件的信息，您可以訪問官方j(luò)Query文檔。如果您有任何關(guān)于在jQuery中使用事件的問題或技巧，請發(fā)表評論。

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

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

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

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

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

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

如何在jQuery中以編程方式觸發(fā)事件？

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

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

jQuery中的事件委托是什么，為什么它有用？

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

如何阻止jQuery中事件的默認(rèn)操作？

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

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內(nèi)的文本。
  }
});

jQuery中的.click()和.on('click')有什么區(qū)別？

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

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

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

$(window).unload(function() {
  alert("請不要離開！"); // 不起作用。
});

如何將多個事件綁定到j(luò)Query中的元素？

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

$("#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中的右鍵單擊事件?！皐hich”屬性對于右鍵單擊將為3。這是一個例子：

$("img").contextmenu(function(event) {
  event.preventDefault();
  $("#custom-menu")
    .show().css({
      top: event.pageY + 10,
      left: event.pageX + 10
      // 在鼠標(biāo)點(diǎn)擊附近顯示菜單
    });
});

$("#custom-menu #option").click(function() {
   $("img").toggleClass("class-name");
   // 切換圖像類。
});

以上是全面了解jQuery中的事件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！