jquery中监听事件_全面了解jQuery中的事件

jquery中监听事件

本文由Wern Ancheta和Camilo Reyes进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

网页中几乎所有的用户交互都可以在jQuery中捕获为事件。 事件很重要，因为它们使您可以根据用户的操作做出适当的响应。 例如，您可以编写代码来基于按钮单击或滚动事件来更改网页的背景颜色。

jQuery有许多快捷方式，例如contextmenu() ， hover()和keyup() ，可以处理不同的事件。 除了专用方法外，jQuery还提供了通用的on方法，该方法允许您为任何事件附加处理程序： on('eventName', handler) 。 请记住，这些方法只是标准DOM事件的包装，您可以在纯JavaScript中添加这些事件的处理程序。

在本教程中，我们将快速浏览所有这些事件方法，这些方法分为五大类，并讨论了使用它们时的最佳实践。

浏览器事件

此类别中有三个事件。 这些是error ， resize和scroll 。 当图片等元素无法正确加载时，会引发error事件。 从jQuery 1.8版开始，不推荐使用其快捷方式，因此您现在应该使用on('error', handler) 。

调整大小事件

每当浏览器窗口大小更改时，都会触发此事件。 不同的浏览器可以根据实现不同地调用调整大小处理程序。 Internet Explorer和基于WebKit的浏览器连续调用该处理程序，而Opera等浏览器仅在调整大小事件结束时才调用该处理程序。

下面的代码片段根据窗口宽度交换图像src 。

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth <= 600) {
    $("img").attr("src", "image-src-here.jpg");
    // Image src changed at this point.
  }
});

此CodePen演示显示了正在运行的事件：

见笔resize事件由SitePoint（ @SitePoint上） CodePen 。

滚动事件

当用户滚动到该特定元素中的其他位置时，该元素可以触发此事件。 除了window对象外，任何具有滚动条的元素都可以触发此事件。 例如，任何将overflow属性设置为scroll的元素或任何可滚动的iframe都可以触发此事件。

请记住，只要滚动位置发生变化，就会调用处理程序。 滚动的原因无关紧要。 可以通过按箭头键，单击或拖动滚动条或使用鼠标滚轮来触发。 在下面的代码中，我们检查用户是否向下滚动了500px以上并执行了一些操作。

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("You have scrolled enough!");
    // Update the text inside alert box.
  }
});

在下面的CodePen演示中，如果您继续滚动并到达末尾，您应该会看到一条通知，告诉您您几乎在网页的底部：

参见Pen CodePen上SitePoint （ @SitePoint ） 的滚动事件 。

文件载入活动

jQuery具有用于根据文档或DOM状态触发的三个事件的方法。 这些是load ， unload和ready 。

load()可用于将处理程序附加到任何加载外部资源的元素，例如图像，脚本，iframe和window对象本身。 附加到其的元素以及所有子元素都完全加载后，将触发该事件。 当与图像一起使用时，会带来一些问题。 首先是它不能正确地冒泡DOM树。 第二个问题是它既不可靠也不跨浏览器。

当用户离开网页导航时，将触发unload事件。 发生这种情况的原因是，用户单击了一个链接，在地址栏中键入了一个新URL或关闭了浏览器窗口。 页面重新加载也会触发此事件。 请注意，使用preventDefault()不会取消unload事件。 此外，此事件处理程序中的大多数浏览器都将忽略对alert() ， confirm()和prompt()调用，这意味着以下代码将不起作用：

$( window ).unload(function() {
  alert("Please don't leave!"); // Won't work.
});

从1.8版开始，不推荐使用load()和unload() 。

准备事件

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

在大多数情况下，在脚本可以正常运行之前，不需要完全加载图像之类的所有元素。 您需要确保的是DOM层次结构已完全构建。 ready事件将为您解决这个问题。 仅在DOM准备就绪后，才运行与此事件关联的所有处理程序。 在处理程序内部，您可以运行jQuery代码或将事件处理程序附加到其他元素，而无需担心。

下面的CodePen演示加载了高分辨率图像。 您会注意到，在图像完全加载之前，DOM已准备就绪。

请参阅PenPen上的SitePoint （ @SitePoint ） 的DOM就绪事件 。

如果您的代码取决于某些CSS样式属性的值，则应在运行它们之前首先提供对相应样式表或嵌入式样式的引用。

键盘事件

键盘事件可以由用户与键盘的任何交互触发。 每个此类事件将具有有关按下的键和事件类型的信息。 jQuery中有三个键盘事件快捷键keydown() ， keyup()和keypress() 。

按键和按键事件

顾名思义，当用户释放键盘上的键时会触发keyup而当用户按下键盘上的键时会触发keydown 。 这两个事件的处理程序都可以附加到任何元素上，但是只会触发当前具有焦点的元素上的处理程序。

建议使用event对象的which属性来确定按下了哪个键。 这是由于以下事实：浏览器使用不同的属性来存储此信息，而jQuery标准化了which属性以可靠地检索此信息。

需要记住的另一件事是，这两个事件在a和shift + a之间没有区别。 在后一种情况下， shift和a分别记录。 在下面的代码中，我为用户提供了一个警告框，其中记录了任何keydown事件。 当按下y键时，将从DOM中删除特定元素。

$("#alert").keydown(function(event) {
  switch (event.which) {
    case 89: // keycode for y
    $("#element").remove(); // Remove element from the DOM
    break;
  }
});

见笔KeyDown事件由SitePoint（ @SitePoint ）上CodePen 。

按键事件

此事件就像keydown事件一样。 主要区别在于，修饰键和非打印键（例如Shift ， Esc等）不会触发keypress事件。 当我说您不应该使用keypress事件来捕获特殊的击键（例如箭头键）时，我对此并不足够强调。 当您想知道输入了哪个字符（例如A或a时，将使用keypress 。

下面的代码片段根据所按下的键隐藏了一个元素：

$("body").keypress(function(event) {
  switch (event.keyCode) {
    case 75: 
    // 75 stands for capital K in keypress event
    $(".K").css("display", "none");
    break;
  }
});

见笔的按键事件由SitePoint（ @SitePoint上） CodePen 。

鼠标事件

当用户使用指示设备（例如鼠标）进行交互时，会触发鼠标事件。 事件可以基于诸如click ， dblclick和contextmenu类的click ，也可以基于诸如mouseenter ， mouseleave和mousemove 。 在本节中，我将简要讨论所有这些内容，并包括一些演示，以说明它们之间的细微差别。

基于点击的事件

jQuery中定义了五个基于单击的事件方法。 从名称中可以明显看出，当用户分别按下和释放元素上方的鼠标按钮时，将触发mousedown和mouseup事件。 另一方面，只有在同时按下鼠标按钮并随后在指定元素上释放鼠标按钮时，才会触发click事件。

dblclick稍微复杂一些。 对于要注册为dblclick的事件，在某个特定于系统的时间间隔到期之前，应快速单击两次鼠标。 您不应同时将click和dblclick处理程序附加到单个元素，因为click触发的事件是特定于浏览器的。 一些浏览器可能会在双击事件之前注册两个单击事件，而其他浏览器可能会在双击前注册一个单击事件。

在右键单击某个元素后，但在显示上下文菜单之前，将触发contextmenu事件。 这意味着您可以使用事件处理程序中的相应代码来防止显示默认上下文菜单。

下面的代码段阻止默认上下文菜单在右键单击时显示，而是显示自定义菜单：

$("img").contextmenu(function(event) {
  event.preventDefault();
  $("#custom-menu")
    .show().css({
      top: event.pageY + 10,
      left: event.pageX + 10
      // Show the menu near the mouse click
    });
});

$("#custom-menu #option").click(function() {
   $("img").toggleClass("class-name");
   // Toggle an image class.
});

此演示在单击图像时将CSS样式应用于图像，并具有自定义上下文菜单：

请参见Pen 在 CodePen上的SitePoint （ @SitePoint ） 的contextmenu事件 。

基于运动的事件

某些事件是基于鼠标指针在元素上，元素内外的移动。 有六种基于运动的事件方法。

让我们从mouseover和mouseenter事件开始。 顾名思义，当鼠标指针输入一个元素时，这两个事件都会触发。 同样，当鼠标指针离开元素时，将触发mouseleave和mouseout事件。

mouseleave和mouseout之间的区别是，仅当鼠标指针移到绑定到其的元素之外时才触发前者。 另一方面，即使在该元素的任何后代之外进行移动，也会触发mouseout 。 mouseenter和mouseover之间存在完全相同的区别。

在CodePen上查看 SitePoint（ @SitePoint ）的笔鼠标移动事件 。

让我们看看mouseenter和mouseover事件的计数如何根据鼠标的移动而变化。 尝试从右侧输入大的蓝色框，然后在进入右侧的粉红色框之前停止。 现在， mouseenter和mouseover都应具有值1。如果向左移动并输入粉红色框，则mouseover计数将变为2。 发生这种情况是由于mouseover事件使事件冒泡。 粉色框上的mouseover事件“冒泡”到外部蓝色框，使mouseover事件的计数增加1。当您向左移动并在两个粉红色框之间停止时， mouseover事件再次触发。 到那时，您到达蓝色框的左端， mouseover事件的计数应为5， mouseenter事件的计数仍应为1。

可以使用完全相同的推理来解释mouseleave和mouseout事件的计数。 尝试以不同的方向移动，看看计数如何变化。

鼠标移动和悬停事件

当鼠标指针在元素内移动时，将触发mousemove事件。 只要有鼠标移动，它就会触发，即使它只有一个像素也是如此。 因此，可以在短时间内触发数百个事件。 可以想象，在事件处理程序中执行复杂的操作可能会导致浏览器滞后。 建议使mousemove事件处理程序尽可能高效，并在不再需要时取消绑定。

仅当鼠标指针进入或离开元素时， hover才会触发。 有两种方法可以调用hover方法。 第一个是：

$("your-selector").hover( handlerIn, handlerOut );

这里， handlerIn()当鼠标指针进入的元件并执行handlerOut()当鼠标指针离开它。 第二种方法是：

$("your-selector").hover(handlerInOut);

这次，在进入和离开元素时都执行了相同的handlerInOut函数。

请参阅Pen CodePen上的SitePoint （ @SitePoint ） 的悬停和鼠标移动事件 。

注意：此演示使用CSS滤镜效果，IE中不支持。

表单活动

表单在网络上无处不在。 几乎每个用户都在某个时候填写表格。 jQuery具有专用于处理表单事件的特殊方法。 这些事件可以在价值变化或失去焦点时触发。 有七个表单事件，我们将一一讨论。

模糊，聚焦，聚焦和聚焦事件

每当元素获得焦点时，就会触发focus事件。 它仅适用于表单元素和锚标记。 要触发对任何其他元素的focus ，您需要设置元素的tabindex属性。 请记住，将焦点设置在隐藏元素上会导致Internet Explorer错误。 如果必须触发焦点事件而不显式设置焦点，则可以调用triggerHandler( "focus" )方法。

每当元素失去焦点时，就会触发blur事件。 在较旧的浏览器上，此事件仅适用于表单元素。

与focus事件不同，只要任何元素或其后代获得焦点， focusin触发focusin 。 同样，只要任何元素或其后代失去焦点， focusout触发聚焦。 因此，如果您希望事件冒泡，则应改用这两个事件。

选择，更改和提交事件

当元素更改值时，将触发change事件。 此事件仅适用于<input> ， <textarea>和<select>元素。 对于复选框，单选按钮和选择框，一旦用户进行任何选择，就会触发此事件。 在其他元素上，它仅在失去焦点后才会触发。 另请注意，如果使用JavaScript更改了输入元素的值，则不会触发此事件。

当用户在元素内进行文本选择时，将触发select事件。 此事件的作用域受到更多限制，仅适用于<input type="text">和<textarea>元素。 如果要检索选定的文本，则必须使用跨浏览器的jQuery插件。

当用户尝试提交表单时，将触发submit事件。 您只能将处理程序附加到表单元素。 要触发此事件，用户必须单击<input type="submit"> ， <button type="submit">或<input type="image">元素。 有趣的是，JavaScript submit事件不会在Internet Explorer中冒泡。 但是，此行为已从jQuery 1.4版开始跨浏览器标准化。

在CodePen上查看 SitePoint（ @SitePoint ）的笔表单事件 。

jQuery 3中的更改

从jQuery 1.8版开始，不推荐使用load ， error和unload方法。 load()方法本质上是模棱两可的。 此方法可能意味着AJAX加载或实际触发了加载事件。 同样， error方法也可以与jQuery.error()方法混淆。 现在在jQuery 3中，这些方法终于被删除了。 现在，您必须使用on方法注册这些事件侦听器。

最后的想法

在本文中，我介绍了所有主要的jQuery事件方法以及相似事件之间的区别。 知道什么时候使用keypress代替keydown可以帮助您避免麻烦和节省宝贵的时间。 尽管jQuery能够使用普通JavaScript捕获DOM事件，但它确实在后台进行了跨浏览器差异的标准化，这可能是一个优势，具体取决于您的站点/应用程序必须支持的浏览器。

要了解有关事件的更多信息，请访问官方jQuery文档 。 如果您有关于在jQuery中使用事件的任何疑问或技巧，请发表评论。

翻译自: https://www.sitepoint.com/comprehensive-events-jquery/

jquery中监听事件