97久久人人超碰国产精品,99久久精品国产免费看,大香线蕉伊人久久爱

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。當諸如圖像之類的元素加載不正確時，會觸發(fā)error事件。自jQuery 1.8版以來，其快捷方法已被棄用，因此您現在應該改用on('error', handler)。

`resize`事件

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

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

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

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

查看CodePen演示

`scroll`事件

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

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

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

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

查看CodePen演示

文檔加載事件

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

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

當用戶從網頁導航離開時，會觸發(fā)unload事件。這可能是因為用戶單擊了鏈接，在地址欄中鍵入了新的URL或關閉了瀏覽器窗口。頁面重新加載也會觸發(fā)此事件。請注意，使用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樣式屬性的值，則應首先在運行它之前提供對相應樣式表或嵌入式樣式的引用。

鍵盤事件

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

`keyup`和`keydown`事件

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

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

另一件值得記住的事情是，這兩個事件不區(qū)分<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事件。一個主要區(qū)別是，修飾符和非打印鍵（如<kbd>Shift</kbd>、<kbd>Esc</kbd>等）不會觸發(fā)keypress事件。當我說你不應該使用keypress事件來捕獲特殊按鍵（如箭頭鍵）時，我再怎么強調也不為過。當您想知道輸入了哪個字符（例如A或a）時，應使用keypress。

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

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

查看CodePen演示

鼠標事件

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

基于點擊的事件

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

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

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

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

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

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

查看CodePen演示

基于移動的事件

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

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

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

查看CodePen演示

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

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

`mousemove`和`hover`事件

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

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

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

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

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

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

查看CodePen演示

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

表單事件

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

`blur`、`focus`、`focusin`和`focusout`事件

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

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

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

`select`、`change`和`submit`事件

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

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

當用戶嘗試提交表單時，會觸發(fā)submit事件。您只能將處理程序附加到表單元素。要觸發(fā)此事件，用戶必須單擊<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加載或實際觸發(fā)的load事件。類似地，error方法也可能與jQuery.error()方法混淆?，F在在jQuery 3中，這些方法最終已被刪除。您現在必須使用on方法來注冊這些事件偵聽器。

最后的想法

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

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

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

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

在jQuery中，您可以使用event.stopPropagation()方法阻止事件向上冒泡DOM樹。此方法可防止事件傳播到父元素。需要注意的是，它不會阻止任何默認行為發(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()僅將處理程序附加到當前元素，而.live()將處理程序附加到當前元素和將來與選擇器匹配的所有元素。但是，值得注意的是，自jQuery 1.7起.live()方法已被棄用，并在jQuery 1.9中被刪除。您應該改用.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中的事件委托是一種技術，您將事件的處理委托給父元素，而不是將事件處理程序綁定到各個元素。當您有大量需要類似事件處理程序的元素，或者當您動態(tài)地將元素添加到DOM時，這尤其有用。它通過減少需要綁定的事件處理程序的數量來提高性能。

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

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

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

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

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

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

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

$(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中的右鍵單擊事件?！皐hich”屬性對于右鍵單擊將為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中文網其他相關文章！

本站聲明

本文內容由網友自發(fā)貢獻，版權歸原作者所有，本站不承擔相應法律責任。如您發(fā)現有涉嫌抄襲侵權的內容，請聯(lián)系admin@php.cn