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 事件
当元素改变值时,该更改事件被触发。此事件仅适用于 ,