JavaScript庫的事件處理的幾種類型(mootool)

來源:互聯網
上載者:User
什麼是事件?

事件(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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.