全面了解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使用中的任何问题或建议,请发表评论。

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

https://www.rokub.com

» 本文来自:前端开发者 » 《全面了解jQuery事件_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2350.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!