本文由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演示显示了正在运行的事件:
请参阅Pen CodePen上SitePoint ( @SitePoint ) 的resize事件 。
滚动事件
当用户滚动到该特定元素中的其他位置时,该元素可以触发此事件。 除了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()
。
准备事件
在大多数情况下,在脚本运行之前没有任何问题的情况下,无需完全加载图像之类的所有元素。 您需要确保的是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 )的Pen Form事件 。
jQuery 3中的更改
从jQuery 1.8版开始,不推荐使用load
, error
和unload
方法。 load()
方法本质上是模棱两可的。 此方法可能意味着AJAX加载或实际触发了加载事件。 同样, error
方法也可以与jQuery.error()
方法混淆。 现在在jQuery 3中,这些方法终于被删除了。 现在,您必须使用on
方法注册这些事件侦听器。
最后的想法
在本文中,我介绍了所有主要的jQuery事件方法以及相似事件之间的区别。 知道什么时候使用keypress
代替keydown
可以帮助您避免麻烦和节省宝贵的时间。 尽管jQuery能够使用普通的JavaScript捕获DOM事件,但它确实在后台进行了跨浏览器差异的规范化,这可能是一个优势,具体取决于您的网站/应用必须支持的浏览器。
要了解有关事件的更多信息,请访问官方jQuery文档 。 如果您有任何有关在jQuery中使用事件的问题或技巧,请发表评论。
From: https://www.sitepoint.com/comprehensive-events-jquery/