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

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

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

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

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

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

瀏覽器事件

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

resize事件

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

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

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

此CodePen演示展示了事件的實(shí)際效果：

查看CodePen演示

scroll事件

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

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

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

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

查看CodePen演示

文檔加載事件

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

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

當(dāng)用戶從網(wǎng)頁導(dǎo)航離開時(shí)，會觸發(fā)unload事件。這可能是因?yàn)橛脩魡螕袅随溄?，在地址欄中鍵入了新的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)滾動(dòng)足夠了！");
    // 更新警報(bào)框內(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ū)⑹录幚沓绦蚋郊拥狡渌兀鵁o需擔(dān)心。

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

查看CodePen演示

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

鍵盤事件

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

keyup和keydown事件

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

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

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

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

查看CodePen演示

keypress事件

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

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

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

查看CodePen演示

鼠標(biāo)事件

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

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

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

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

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

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

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

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

查看CodePen演示

基於移動(dòng)的事件

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

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

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

查看CodePen演示

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

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

mousemove和hover事件

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

hover僅當(dāng)鼠標(biāo)指針進(jìn)入或離開元素時(shí)才會觸發(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)入元素時(shí)執(zhí)行handlerIn()，當(dāng)鼠標(biāo)指針離開元素時(shí)執(zhí)行handlerOut()。第二種方法是：

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

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

查看CodePen演示

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

表單事件

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

blur、focus、focusin和focusout事件

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

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

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

select、change和submit事件

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

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

當(dāng)用戶嘗試提交表單時(shí)，會觸發(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ū)別。知道何時(shí)使用keypress而不是keydown可以幫助您避免麻煩並節(jié)省寶貴的時(shí)間。儘管可以使用純JavaScript連接到DOM事件，但jQuery確實(shí)在後臺對跨瀏覽器差異進(jìn)行了一些規(guī)範(fàn)化，這取決於您的網(wǎng)站/應(yīng)用程序必須支持哪些瀏覽器，這可能是一個(gè)優(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ā)事件。此方法允許您手動(dòng)觸發(fā)元素上的指定事件。這是一個(gè)例子：

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

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

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

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

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

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

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

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

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

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

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

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

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

$("#alert").keydown(function(event) {
  switch (event.which) {
    case 89: // y的鍵碼
      $("#element").remove(); // 從DOM中刪除元素
      break;
  }
});

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

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

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

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

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

$("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)文章！