MooTools中的事件（上）

在前面的教程中我们已经把《Selecting DOM Elements 》部分学习完了。 为了给网站用户提供更好的交互性和动态特性 （比如说拖放与拖拽，动画，等等），只有选择器是不够的，事件也是建立交互界面的一个重要部分。

什么是事件？

事件(Event)是JavaScript应用跳动的心脏。当 Web 页面中发生了某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

 

通过使用 JavaScript ，你可以监测特定事件的发生，并规定让某些事情发生以对这些事件做出响应。

知识扩展：

理解JavaScript中的事件处理

用 JavaScript 处理事件

JavaScript事件（javascript大牛ppk）

MooTools JavaScript 库的事件处理

MooTools 支持HTML4.01中的所有事件属性，例如 onclick 和 onmouseout 等,但该框架在使用这些事件属性 时没有“on”
前缀(‘click ’替代‘onclick’, ‘mouseout’ 替代‘onmouseout’).

MooTools是简洁的，它不仅扩展了自己的几个HTML 4.01事件属性，而且还保证了网页事件的methods 和 functions，在所有的网络浏览器中能够正常执行。事件是本地MooTools的组成部分，也被称为“event hash”。

接下来,我们就去了解一下，在MooTools中所支持的事件属性，我们为了便于讨论，我们将分为5个组（5大类的MooTools事件类型）：窗口事件 (Window Events)，
表单元素事件 (Form Element Events)，键盘事件 (Keyboard Events)，鼠标事件 (Mouse Events)，MooTools自定义事件。

窗口事件 (Window Events)

Window events refer to activities that occur in the background. There are only two
window events.

HTML event attribute / MooTools event name	描述
onload / load	This event occurs when the window and images on the page have fully loaded, and/or when all of the iFrames in the page have loaded. It can be used for monitoring when the web page has fully loaded (such as when you want to know if all images have been downloaded). （页面内容完成时触发此事）
onunload / unload	This even happens when a window or an iFrame is removed from the web page. It has limited use. （当文档卸载时执行脚本）

表单元素事件 (Form Element Events)

There are events that occur within form elements (such as <input> elements), and we’ll
refer to these as form events.

For example, the onfocus event is triggered when the user clicks on an input field (you’ll
see this in action in this chapter), effectively focusing on that particular input field. Some of
these events apply even to non-form elements

HTML event attribute / MooTools event name	描述
onblur / blur	This event occurs when an element loses focus, either because the user has clicked out of it, or because the user used the Tab key to move away from it. This is helpful for monitoring the instant when the user loses focus on a particular element. （当元素失去焦点时执行脚本）
onchange / change	This event happens when the element loses focus or when its original value has changed. This is helpful for knowing when the user starts typing in the input text field or text area, or when a user selects different option in a select drop-down element. （当元素改变时执行脚本）
onfocus / focus	This event is the opposite of the blur event; it is triggered when the user focuses on an element. This is useful for watching when the user highlights a form field or when they have navigated to it using the Tab key. （当元素获得焦点时执行脚本）
onreset / reset	This event only applies to form elements. This event is triggered when the form has been reset to its default values. （当表单被重置时执行脚本）
onselect / select	This event happens when the user highlights (selects) text in a text field. （当元素被选取时执行脚本）
onsubmit / submit	This event is only for form elements. This event occurs when the user submits a web form. （当表单被提交时执行脚本）

键盘事件 (Keyboard Events)

There are events that happen when a user presses on a keyboard input device; let’s call
these the keyboard events.
For example, the onkeypress event is triggered when you press any key on your keyboard.

HTML event attribute / MooTools event name	描述
onkeydown / keydown	This event occurs when the user holds down a keyboard key. （当键盘被按下时执行脚本）
onkeypress / keypress	This event is triggered whenever the user presses a keyboard key. （当键盘被按下后又松开时执行脚本）
onkeyup / keyup	This event happens when the user releases a key. （当键盘被松开时执行脚本）

鼠标事件 (Mouse Events)

There are several HTML event properties that allow you to deal with activities related to the
mouse. Clicking, moving, double-clicking, and hovering are all mouse events.

HTML event attribute / MooTools event name	描述
onclick / click	This event occurs whenever the user uses the mouse button to click on an element. （当鼠标被单击时执行脚本）
ondblclick / dblclick	This event occurs whenever the user double-clicks on an element. （当鼠标被双击时执行脚本）
onmousedown / mousedown	This event occurs when the mouse button is held down. （当鼠标按钮被按下时执行脚本）
onmouseup / mouseup	This event occurs when the mouse button is released. （当鼠标按钮被松开时执行脚本）
onmousemove / mousemove	This event occurs when the mouse is moved. （当鼠标指针移动时执行脚本）
onmouseout / mouseout	This event occurs when the mouse pointer is removed from the target element. （当鼠标指针移出某元素时执行脚本）
onmouseover / mouseover	This event occurs when the mouse pointer enters the target element. （当鼠标指针悬停于某元素之上时执行脚本）

图片事件

abort	读取中断
error	读取错误

卷轴事件

scroll	卷动时

 

MooTools自定义事件（MooTools custom mouse events）

MooTools supplies us with three custom events that extend the standard mouse events.

MooTools event name	描述
mouseenter	This event is triggered when the user’s mouse pointer enters an element, but does not fire again when the mouse goes over a child element (unlike mouseover). This is useful for detecting the mouseover event once in nested element structures, such as <li><a>item</ a></li>. If we were to use the mouseover event, it would be triggered twice, once for <li> and once again for <a>. （本事件在鼠标进入指定元素区域时触发,并且不会在鼠标穿越子元素的时候再次触发(区别于mouseover)）
mouseleave	This event works similarly to mouseenter in that it is triggered only once when the mouse pointer exits the target element, unlike the mouseout event that gets triggered more than once for nested element structures. （本事件在鼠标离开指定元素区域时触发,并且不会再离开本元素的子元素的时候触发(区别于mouseout)）
mousewheel	This even is triggered when the scroller on a mouse is used (available in most modern mouse input devices, usually situated in between the left and right buttons). （本事件在鼠标滚轮滚动时触发）