JQuery事件总结

毕设要翻译短论文,就网上随便找了篇让女朋友翻译了下,哈哈,还不错。没错,我就是来花式秀女友的。格式乱乱的,明天改

jQuery有很多快捷的方法,像contextmenu(),hover()和keyup(),处理不同的事件。除了专门的方法,jQuery也提供了一个通用的方法,它允许你把任何事件的处理程序:在('eventname,处理程序)。但是,这些方法只是包装标准的DOM事件,你可以在纯JavaScript这些事件添加处理程序。
在本教程中,我们将快速看一下所有这些事件的方法,它被分为五大类,并讨论在与他们合作时,最好的做法。

  1. 浏览器事件
    这一类有三个事件。这些都是错误、调整和滚动。当元素如图像不正确加载时,该错误事件被触发。它的快捷方法已被否决因为jQuery 1.8版本,所以你现在应该使用('error', handler)。
  • resize()事件
    每当浏览器窗口更改时,该事件就触发。不同的浏览器可以根据执行不同的方式调用调整大小处理程序。Internet Explorer和基于WebKit的浏览器一直调用处理程序,像Opera这样的浏览器只在调整大小在调整结束的时候.
    这段代码下面互换基于窗口宽度的图像源。

这个代码演示展示了在行动的事件:

2 滚动事件
当用户滚动到特定元素中的不同位置时,可以将该事件设置为一个元素。除了窗口对象,一个滚动条的任何元素都可以触发此事件。例如,设置滚动overflow属性的任何元素,或任何可滚动的iframe,可以解雇这一事件。
但是,当滚动位置更改时,该处理程序被调用。滚动的原因是不相关的。它可以在按下箭头键触发,点击或拖动滚动条或使用鼠标滚轮。在下面的代码中,我们检查用户是否已滚动下跌超过500px和执行一些操作。

在下面的演示,如果你保持使用滚动和接近结束时你应该看到一个通知,你几乎是在网页的底部:

3 文档加载事件
jQuery三事件被解雇了基于文档或DOM的状态的方法。这些都是加载,未加载和准备。
load()可以用来将处理任何元素加载一个外部资源,如图片、脚本、内嵌框架和窗口对象本身。当元素连接到,以及所有的子元素,已完全加载时发生火灾。当使用图像时,它带来了一些问题。第一是它不能正确地泡了DOM树。二是既不可靠也不跨浏览器。
当用户在浏览网页时,卸载事件被触发。这可能发生,因为用户点击了一个链接,键入一个新的网址地址栏或关闭浏览器窗口。这一事件也引发了页面刷新。请注意,使用preventdefault()不会取消卸载事件。此外,电话alert(),confirm()和prompt()会被大多数浏览器这个事件处理程序内的忽略,意味着下面的代码不会工作:

自从版本1.8后无论是load()还是unload()都被弃用。
2 准备活动
在大多数情况下,没有必要为所有的元素,如图像加载前一个脚本可以运行没有任何问题。你需要确保的是,DOM层次结构已经完全构造。准备活动需要照顾这个为您。任何处理程序附加到该事件是只运行后的DOM就绪。在处理程序可以运行你的jQuery代码或附加事件处理程序的其他元素没有任何烦恼。
在荷载作用下的高分辨率图像CodePen演示。你会注意到DOM就绪之前加载图像完全。

如果你的代码依赖于一些CSS样式属性的值,你应该先到相应的样式表提供参考或嵌入式方式运行它之前。
3 键盘事件
键盘事件触发可以通过任何用户和键盘交互。每一个这样的事件将有关于按键和事件类型的信息。这三个键盘快捷方式在jQuery -中是keydown(), keyup() and keypress().
the keyup and keydown事件
正如名字所暗示的,KeyUp开火当用户释放键盘和keydown的关键是发射时,用户按下键盘上的键。这两个事件的处理程序都可以连接到任何元素,但只有在当前有焦点的元素上的处理程序才被触发。
建议使用该事件对象的属性来确定被按下的键。这是因为浏览器使用不同的属性来存储这些信息并将其财产jQuery可靠地检索此信息。
更值得一提的是,这两个事件在后一种情况下都没有区别,两个移动和一个分别是单独注册的。在下面的代码中,目前的用户一个警告框,其中登记任何KeyDown事件。当Y键被按下,一个特定的元素从DOM。

按键事件
这一事件就像KeyDown事件。一个主要的区别是,改性剂和非打印键像shift,ESC等不火KeyPress事件。我不能强调这一点时,我说,你不应该使用KeyPress事件捕捉特殊按键像箭头键。按键是用于当你想知道它的字符输入,A如a。
下面的代码片断隐藏单元根据按键:

鼠标事件
当用户使用指向设备如鼠标时进行交互时,鼠标事件被触发。事件可以根据点击喜欢单击,双击和右键菜单或运动,像MouseEnter、MouseLeave和MouseMove。在这一节中我将讨论所有这些简单的包括一些演示来说明它们之间的细微差别。
基于点击事件
有五个点击基于事件的方法定义在jQuery。MouseDown和MouseUp事件,明显的名字,被解雇,当用户按下并释放鼠标按钮元素上分别。另一方面,只有当鼠标按钮被按下并释放到指定的元素后,单击事件才被触发。
双击要稍微复杂一些。一个事件被登记为双击应该有两个快速鼠标点击某一系统相关的时间间隔到期之前。你不应该把处理单元为单击和双击的事件同时触发双击特定浏览器。一些浏览器可能注册2个单点的点击事件之前,双击一个,而其他人可能只注册一个点击事件之前,双击。
ContextMenu事件后一个元素的右键单击只是在显示上下文菜单了。这意味着你可以在事件处理程序中使用适当的代码来阻止默认的上下文菜单。
下面的代码段防止默认的上下文菜单显示在右击显示自定义菜单代替:

这个演示应用CSS样式的图像时,它的点击,并有一个自定义的上下文菜单:

基于运动的事件
有些事件是基于鼠标指针的移动,或者是在元素的移动中。有六个基于运动的事件方法。
让我们用鼠标悬停和MouseEnter事件开始。当鼠标指针进入一个元素时,这个名字就说明了这两个事件的发生。同样,MouseLeave和mouseout事件火当鼠标指针离开元素。
MouseLeave和mouseout的一个区别是,前者是仅当鼠标指针移动一个元素势必外发射。另一方面,mouseout触发甚至以外的任何后代元素的运动。MouseEnter和mouseover之间存在同样的差异。

让我们来看看在如何MouseEnter和mouseover事件变化基于鼠标动作的统计看。试着从右边进入大蓝方块,然后在进入右边的粉红色框之前停止。两MouseEnter和mouseover现在应该有值1。如果你向左移动并进入粉红色的盒子,mouseover计数的变化两。这是因为事件冒泡的mouseover事件。在粉红色的盒子“泡沫”到外蓝箱的mouseover事件,由1增加themouseover事件计数。当你再离开和停止的粉色盒子之间,mouseover事件再次开火的时候,你到达蓝箱左端的mouseover事件计数应该是5和计数MouseEnter事件仍然应该是1。
同样的概念也适用于解释MouseLeave和mouseout事件计数。试着在不同方向移动,看看计数的变化。

事件MouseMove和悬停
MouseMove事件被触发时,鼠标指针移动一个元素内。它触发了鼠标移动,即使它是一个像素的小。因此,数以百计的事件可以在一个小的时间被解雇。你可以想象,在事件处理程序中执行复杂的操作会导致浏览器延迟。明智的做法是让MouseMove事件处理程序尽可能高效,解开它时,它不再需要。
只有当鼠标指针进入或离开该元素时,才触发鼠标悬停状态。有2种方法调用悬停方法。第一个是:

在这里,handlerin()执行当鼠标指针进入元和handlerout()当鼠标指针离开它。二是:

这一次同样的handlerinout功能是对进入和离开的元素执行。

注:此演示使用CSS滤镜效果,这是不支持的IE浏览器。
活动形式
表格在网上随处可见。几乎每一个用户在某个点上填写一个表格。jQuery有特殊方法专门处理事件的方式。这些事件可以触发一个值的变化或损失的焦点。有七种形式的事件,我们将逐一讨论他们。
模糊,焦点,焦点和focusout事件
focus事件被触发时,当元素获得焦点。它仅适用于组成元素和锚标签。触发其它任何元素,你需要设置元素的属性的作用重点。但是,设置集中在隐藏元素将导致一个错误在互联网浏览器。如果你有触发焦点事件没有设置重点明确,你可以使用triggerhandler(“focus”)的方法。
当元素失去焦点时,就触发了模糊事件。在较旧的浏览器中,此事件仅适用于表单元素。
不同的焦点事件,焦点是解雇任何元素或其后代获得焦点。同样,focusout解雇任何元素或其后代失去焦点。所以,如果你想让事件发生,你应该用这2个事件来代替。
The Select, Change and Submit 事件
当元素改变值时,该更改事件被触发。此事件仅适用于 <input>, <textarea> 和 <select>元素。在复选框,单选按钮,选择框,这个事件被当用户作出选择。在其他元素上,它只能在元素失去焦点后触发。还注意到,这一事件不会是如果一个输入元素的值被改变使用JavaScript触发。
当用户在元素中进行文本选择时,会触发选择事件。这一事件更多的范围有限,只适用于 <input type="text">和<textarea>元素。如果你想检索选定文本,你可以使用一个跨浏览器的插件。
当用户试图提交表单时,submit事件被触发。你只能附加处理程序以形成元素。为触发这个事件,用户必须点击<input type="submit">,<button type="submit"> 或 <input type="image">。有趣的是,JavaScript submit事件不在Internet Explorer。然而,这种行为已经常态化的跨浏览器在jQuery 1.4版本。

在jQuery 3的变化
负载误差和卸载方法已被否决因为jQuery 1.8版本。load()方法在本质上是不明确的。这种方法可以是一个AJAX加载或加载事件的实际射击。同样的, error的方法也可以用 jQuery.error() 方法混淆。现在在jQuery 3,这些方法已经被删除。现在,您将要使用的方法来注册这些事件侦听器。
留在最后的思考
在这篇文章中,我已经把所有主要的jQuery事件方法随着相似事件之间的差异。知道何时使用 keypress 代替 keydown可以帮助你避免麻烦,节省宝贵的时间。尽管能够钩到DOM事件与普通的JavaScript、jQuery是引擎盖下做一些规范化的跨浏览器的差异,这可能是一个优势,这取决于你的网站/应用程序的浏览器支持。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • 一、选择网页元素 选择表达式可以是CSS选择器: $(document)//选择整个文档对象 $('#myId')...
    孤魂草阅读 344评论 0 1
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,306评论 0 8
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,591评论 2 10
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,630评论 18 503
  • 雨夜 孤坐在桌前 仿佛被禁言 文思枯竭 只有一股平静的忧伤在心间流淌 越活越牢 越活越累 失了乐天 迷了初心 多了...
    Impermanence阅读 230评论 0 0