全面了解jQuery事件_网站前端开发_前端开发者

网站前端开发_前端开发者丨jquery

https://www.rokub.com

全面了解jquery事件在一个网页内几乎所有用户交互都可以被jquery作为事件扑捉到。事件具有非常重要的意义，可以让你基于用户动作做出适当的响应。例如，可以写代码改变网页的背景颜色，基于按钮单击或者滚动条滚动事件。jQuery有许多快捷方法，像contextmenu()、hover()和keyup()，可以处理不同的事件。除了专门的方法，jQuery还提供了通用的方法——on(‘eventName’,handler)，方便你处理任何事件。牢记一点，这些方法只是在标准DOM事件外封装了一层，你可以用原生JavaScript来处理这些事件。在本教程中我们先简单介绍这些事件方法，把这些方法分成五大类，然后来讨论下工作时应遵循的最佳使用方式。浏览器事件浏览器事件有三种，分别是error、resize和scroll。像images这样的元素没有正确加载的时候会触发error事件。该快键方法在jQuery1.8版本中被舍弃了，所以现在应该用on(‘error’,handler)方法来代替。事件浏览器窗口大小发生变化时会触发resize事件。不同浏览器调用resize处理方法也不同。InternetExplorer和基于WebKit的浏览器能够连续的调用处理方法，像Opera只能在resize事件最后调用。下面的代码片段是根据窗口宽度改变imagesrc属性。$(window).resize(function(){

var windowWidth=$(window).width();

if(windowWidth<=600){

$(“img”).attr(“src”,”image-src-here.jpg”);

Imagesrcchangedatthispoint.

}

});

1234567$(window).resize(function(){

var windowWidth=$(window).width();

if(windowWidth<=600){

$(“img”).attr(“src”,”image-src-here.jpg”);

Imagesrcchangedatthispoint.

}

});

这个CodePendemo展示了此事件。SeethePenTheresizeeventbySitePoint(@SitePoint)onCodePen.事件在一个指定的元素中，当用户滚动到不同的位置，可以关闭此事件。除了window（窗口）对象，任何带scrollbar的元素都能触发此事件。例如，所有将overflow属性设置为scroll的元素，或者任何可滚动的iframe可以触发此事件。thecodebelow,wecheck

iftheuserhasscrolleddownmorethan500pxandperformsomeactions.请牢记，scroll位置发生改变时，将调用处理方法。滚动的原因无关紧要。可能是按了方向键，单击或者拖拽滚动条或者使用了鼠标滚轮。在下面的代码，检查用户向下滚动是否超过500px，然后触发一些动作。$(window).scroll(function(){

if($(window).scrollTop()>=500){

$(“#alert”).text(“Youhavescrolledenough!”);

Updatethetextinsidealertbox.

}

});

123456$(window).scroll(function(){

if($(window).scrollTop()>=500){

$(“#alert”).text(“Youhavescrolledenough!”);

Updatethetextinsidealertbox.

}

});

在下面的CodePendemo中，如果一直向下滚动快到底部的时候，应该会看到一条提醒，告诉你接近网页底部了：SeethePenThescrolleventbySitePoint(@SitePoint)onCodePen.加载事件基于document或DOM状态的三种事件，jQuery有对应的方法，分别是load、unload和ready。load()方法可以给任何元素加上一个处理方法，加载一个外部资源，比如图片、脚本、iframes和window对象本身。当元素以及它所有的子元素都加载完该事件被触发。该方法用在图片加载的时候会有些问题。第一个就是DOM树无法正确冒泡。第二个问题是不可靠也无法跨浏览器。当用户离开页面时unload事件被触发。用户点击一个链接跳转，在地址栏中输入新的URL或者关闭浏览器窗口都能导致此事件发生。还有重新载入页面也会触发。注意，使用preventDefault()方法无法取消unload事件。此外，在unload处理方法中调用alert()、confirm()和prompt()方法，大多数浏览器都会忽略这几个方法，意味着下面的代码不会运行：$(window).unload(function(){

alert(“Pleasedon’tleave!”);

Won’twork.});123$(window).unload(function(){alert(“Pleasedon’

tleave!”);Won’twork.});load()和unload()在1.8版本中都被废弃了。TheReadyEvent大多数情况下，如图像等所有元素无需完全加载就能正确运行脚本。只要确定DOM树构造完就行。ready事件可以帮你解决。所有ready事件的处理方法只有在DOM加载完之后才能运行。在处理方法中可以运行jQuery代码或者将其他事件处理方法绑定到其他元素上。下面的CodePendemo加载了一张高分辨率图片。你会发现DOM在图片完全加载完之前就已经准备好了。SeethePenTheDOMreadyeventbySitePoint(@SitePoint)onCodePen.如果代码依赖于一些css样式属性值，运行之前应该先提供各自引用的样式或嵌入样式。KeyboardEventskeyboard（键盘）事件是由用户和键盘之间的交互触发的。每个keyboard事件包含按键和事件类型信息。jQuery中有三个keyboard快捷方法——keydown()、keyup()和keypress()。TheKeyupandKeydownEvents正如其名，keyup就是当用户释放键盘上的一个键触发，keydown就是按住键盘上一个键触发。这些事件的处理方法可以绑定到任何元素上，但是只有当前焦点元素才会被触发。推荐使用event对象中的which属性来确定哪个键被按下了。实际上不同浏览器将不同信息存储在这个属性中，jQuery将which属性进行了规范化为了方便可靠的检索此信息。还有件事需要注意下，这些事件无法区分a和shift+a。后面的情况shift和a都是分别注册的。在下面的代码，向用户显示一个弹出框并绑定了keydown事件。当按下y键，一个指定的元素将会从DOM中移除。$(“#

alert”).keydown(function(event){switch(event.which){case89:keycodefory$(“#

element”).remove();RemoveelementfromtheDOMbreak;}});1234567$(“#

alert”).keydown(function(event){switch(event.which){case89:keycodefory$(“#

element”).remove();RemoveelementfromtheDOMbreak;}});SeethePenThekeydowneventbySitePoint(@SitePoint)onCodePen.TheKeypressEventkeypress事件和keydown事件非常相似。一个主要的区别就是修饰符和一些像Shift、Esc等无法打印的键，不会触发keypress事件。不应该用keypress事件捕捉像箭头这类的特殊键。当你想知道输入的是哪个字符，比如A或者a，一般可以使用keypress来处理。下面的代码根据按下的键隐藏一个元素：$(“

body”).keypress(function(event){switch(event.keyCode){case75:75standsforcapitalKinkeypressevent$(“.K”).css(“

display”,”

none”);break;}});12345678$(“

body”).keypress(function(event){switch(event.keyCode){case75:75standsforcapitalKinkeypressevent$(“.K”).css(“

display”,”

none”);break;}});SeethePenThekeypresseventbySitePoint(@SitePoint)onCodePen.MouseEvents当用户使用像鼠标这种指点设备时，mouse事件会被触发。该事件基于点击，如单击、双击和右键快捷菜单或者移动动作，如mouseenter、mouseleave和mousemove。在本节中，将简要地讨论所有这些动作，包括一些演示，说明它们之间的细微差别。Click-BasedEventsjQuery中定义了五种基于点击事件的方法。mousedown和mouseup事件，从名字上显而易见其意思，当用户在一个元素上分别按住、释放鼠标按键就会触发。另一方面，只有当鼠标按键在指定元素上按住然后释放才会触发点击事件。dblclick稍微复杂一点。对于注册为dblclick的事件，应该在系统限制时间前快速的点击两次。不能给一个单独的元素同时绑定单击和双击的处理方法，对于双击事件的触发浏览器的处理比较特殊。一些浏览器在双击之前可能会注册两个单独的单击事件，而其他浏览器在双击之前可能只注册一个单击事件。在一个元素上右键单击，在显示内容菜单前触发contextmenu事件。这意味着处理方法中可以用代码阻止显示默认菜单。下面的代码就阻止了右键单击默认的菜单显示，而是显示了一个自定义菜单。$(“

img”).contextmenu(function(event){event.preventDefault();$(“#

custom-menu”).show().css({top:event.pageY+10,left:event.pageX+10Showthemenunearthemouseclick});});$(“#

custom-menu#option”).click(function(){$(“

img”).toggleClass(“

class-name”);Toggleanimageclass.});1234567891011121314$(“

img”).contextmenu(function(event){event.preventDefault();$(“#

custom-menu”).show().css({top:event.pageY+10,left:event.pageX+10Showthemenunearthemouseclick});});$(“#

custom-menu#option”).click(function(){$(“

img”).toggleClass(“

class-name”);Toggleanimageclass.});这个demo当图片被点击就会使用新的css样式，并且有一个自定义内容菜单：SeethePenThecontextmenueventbySitePoint(@SitePoint)onCodePen.Movement-BasedEvents一些事件是基于鼠标指针移动的，进入或离开元素。有六种基于鼠标移动的事件。让我们从mouseover和mouseenter事件开始。正如名字的字面意思，当鼠标指针进入一个元素的时候会触发。类似的，鼠标指针离开一个元素mouseleave和mouseout事件触发。mouseleave和mouseout之间的一个区别就是前者鼠标指针移出绑定的元素就会触发。后者移出元素的任意后代元素也会触发。mouseenter和mouseover的不同也是一样的（同理与mouseleave和mouseout）。SeethePenMousemovementeventsbySitePoint(@SitePoint)onCodePen.来看看基于鼠标移动的mouseenter和mouseover事件是如何计数的。试着从右边进入蓝色的框中，在进入右边粉色的框前停止。现在mouseenter和mouseover的值都应该是1。如果继续像左移动进入粉色框，mouseover值变为2。这是由于mouseover事件冒泡引起的。粉色框的mouseover事件冒泡到外面的蓝色框，所以mouseover事件计数增加1。当继续移动停在两个粉色框之间，mouseover事件再次被触发。到达左边的蓝框时，mouseover事件计数应该是5mouseenter事件应该仍为1。同理可解释mouseleave和mouseout事件计数。尝试不同方向移动鼠标看看计数如何变化。TheMousemoveandHoverEvents当鼠标指针移入一个元素内mousemove事件触发。每当有鼠标移动就会触发，即使移动距离小到只有一个像素。因此，段时间内就可能触发上百次。可以想象，在处理方法中执行复杂的操作会造成浏览器卡顿。明智的做法就是让mousemove事件处理方法尽可能高效，当不需要的时候就解除绑定。当鼠标指针进入并离开元素才会触发hover。有两种方法调用hover方法。第一种是：$(“

your-selector”).hover(handlerIn,handlerOut);1$(“

your-selector”).hover(handlerIn,handlerOut);当鼠标指针移入元素时执行handlerIn()，鼠标指针移出时执行handlerOut()。第二种方法是：$(“

your-selector”).hover(handlerInOut);1$(“

your-selector”).hover(handlerInOut);这次鼠标指针移入移出元素时都执行handlerInOut方法。SeethePenThehoverandmousemoveeventsbySitePoint(@SitePoint)onCodePen.注意：该demo使用的css滤镜效果不支持IE。FormEvents表单在网络中无所不在。几乎每个用户都填写过一些表单。jQuery有指定方法专门处理表单事件。表单值改变或者丢失焦掉都可能触发这些表单事件。有七种表单事件，一个一个来讨论它们。TheBlur,Focus,FocusinandFocusoutEvents当一个元素获得焦点就会触发focus事件。只适合表单元素和锚标签。想触发其他元素的focus事件需要设置元素的tabindex属性。记住，在IE浏览器中给隐藏元素设置focus事件将导致错误。如果一定要触发没有设置focus的元素的focus事件，可以调用triggerHandler(“focus”)方法。blur事件当元素失去焦点时触发。对于老版本的浏览器此事件只适用于表单元素。不像focus事件，focusin事件无论何时无论什么元素或者它的后代元素获取焦点都能触发。类似的，focusout当元素或者它的后代元素失去焦点时触发。所以，如果你想利用事件冒泡的话，你应该使用这两个事件。TheSelect,ChangeandSubmitEvents当一个元素值改变了会触发change事件。此事件只适用于、和元素。在checkboxes、radiobuttons和selectboxes情况下，用户做了任何选择就会触发change事件。对于其他元素就只有失去焦点的时候才会触发。注意，如果使用JavaScript改变input元素的值无法触发change事件。当用户在一个元素中选择文本触发select事件。此事件范围有限，只适用于和元素。如果想要检索所选的文本，需要使用一个跨浏览器jQuery插件。当用户要提交表单时触发submit事件。只能将处理方法绑定在表单元素上。用户点击、或者元素时会触发该事件。有趣的是在IE浏览器中JavaScriptsubmit事件不会冒泡。不过，这个行为在jQuery1.4版本中已经做了跨浏览器规范化。SeethePenFormeventsbySitePoint(@SitePoint)onCodePen.ChangesinjQuery3load、error和unload方法已经在jQuery1.8版本中舍弃。load()方法本质上不太明确。这个方法既可以是AJAX加载或者是普通加载事件。类似的，error方法和jQuery.error()方法会混淆。现在jQuery3中这些方法最终被移除。现在必须给这些方法注册监听器来使用。FinalThoughts在这篇文章中，基本上覆盖了所有jQuery主要的事件方法，还有这些事件之间的差异和相同之处。知道什么时候使用keypress代替keydown可以帮助你避免麻烦和节省宝贵的时间。尽管可以用原生的JavaScript在DOM事件中添加hook，jQuery对跨浏览器的一些差异做了规范化，意味着网站、应用能支持更多浏览器，这是一个优势。想了解更多事件可以访问jQuery官方文档。如果有关于jQuery使用中的任何问题或建议，请发表评论。