什麼是事件?
事件(Event)是JavaScript應用跳動的心臟。當 Web 頁面中發生了某些類型的互動時,事件就發生了。事件可能是使用者在某些內容上的點擊、滑鼠經過某個特定元素或按下鍵盤上的某些按鍵。事件還可能是 網頁瀏覽器中發生的事情,比如說某個 Web 頁面載入完成,或者是使用者滾動視窗或改變視窗大小。
通過使用 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個組:視窗事件 (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. (當滑鼠指標移動時執行指令碼) |
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). (本事件在滑鼠滾輪滾動時觸發) |
原文轉自:http://cssrainbow.cn/tutorials/mootools/875.html