事件(Event)是JavaScript应用跳动的心脏。当 Web 页面中发生了某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ,你可以监测特定事件的发生,并规定让某些事情发生以对这些事件做出响应。
知识扩展:
JavaScript事件(javascript大牛ppk)
MooTools 支持HTML4.01中的所有事件属性,例如 onclick 和 onmouseout 等,但该框架在使用这些事件属性 时没有“on”
前缀(‘click ’替代‘onclick’, ‘mouseout’ 替代‘onmouseout’).
MooTools是简洁的,它不仅扩展了自己的几个HTML 4.01事件属性,而且还保证了网页事件的methods 和 functions,在所有的网络浏览器中能够正常执行。事件是本地MooTools的组成部分,也被称为“event hash”。
接下来,我们就去了解一下,在MooTools中所支持的事件属性,我们为了便于讨论,我们将分为5个组:窗口事件 (Window Events),
表单元素事件 (Form Element Events),键盘事件 (Keyboard Events),鼠标事件 (Mouse Events),MooTools自定义事件。
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 (页面内容完成时触发此事) |
onunload / unload | This even happens when a window or an (当文档卸载时执行脚本) |
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. (当表单被提交时执行脚本) |
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. (当键盘被松开时执行脚本) |
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. (当鼠标指针移动时执行脚本) |
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). (本事件在鼠标滚轮滚动时触发) |