全面了解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中文网其他相关文章！