Several types of JavaScript library event processing (mootool)

What is an event?

Events are the heart of JavaScript applications. When some types of interaction occur on the web page, the event occurs. An event may be a user's clicking on something, passing the mouse over a specific element, or pressing some buttons on the keyboard. Events may also occur in Web browsers, such as loading a Web page, rolling a window, or changing the window size.

By using JavaScript, You can monitor the occurrence of specific events and specify that certain events occur to respond to these events.

Knowledge extension:

Processing events with JavaScript

Javascript events (JavaScript dashboard PPK)

Event processing in the mootools JavaScript Library

Mootools supports all the event attributes in html4.01, such as onclick and onmouseout, but the framework does not use these event attributes with "on"
Prefix ('click' replaces 'onclick', 'mouseout' replaces 'onmouseout ').

Mootools is concise. It not only extends the attributes of several HTML 4.01 events, but also ensures the webpage event methods and functions, which can be executed normally in all web browsers. An event is an integral part of local mootools, also known as "event hash ".

Next, let's take a look at the event attributes supported in mootools. For convenience, we will divide them into five groups: Window events ),
Form element events, Keyboard Events, mouse events, and mootools custom events.

Window events)

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

HTML event attribute/mootools event name	Description
Onload/load	This event occurs when the window and Images On the page have fully loaded, and/or when all 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 ). (This event is triggered when the page content is complete)
OnUnload/unload	This even happens when a window or IFRAME is removed from the web page. It has Limited use. (Execute the script when the document is uninstalled)

Form element event (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), please tively focusing on that particle input field. Some
These events apply even to non-form elements

HTML event attribute/mootools event name	Description
Onblur/blur	This event occurs when an element loses focus, either because the user has clicked out of it, or because the user usedTabKey to move away from it. This is helpful for monitoring the instant when the user loses focus on a particle element. (Execute the script when the element loses focus)
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. (Execute the script when the element changes)
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 usingTabKey. (Execute the script when the element gets the Focus)
Onreset/Reset	This event only applies to form elements. This event is triggered when the form has been reset to its default values. (Execute the script when the form is reset)
Onselect/select	This event happens when the user highlights (selects) text in a text field. (Execute the script when the element is selected)
Onsubmit/submit	This event is only for form elements. This event occurs when the user submits a web form. (Execute the script when the form is submitted)

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	Description
Onkeydown/keydown	This event occurs when the user holds down a keyboard key. (Execute the script when the keyboard is pressed)
Onkeypress/keypress	This event is triggered whenever the user presses a keyboard key. (Execute the script when the keyboard is pressed and loose)
Onkeyup/keyup	This event happens when the user releases a key. (Execute the script when the keyboard is released)

Mouse events)

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

HTML event attribute/mootools event name	Description
Onclick/click	This event occurs whenever the user uses the mouse button to click on an element. (Execute the script when the mouse is clicked)
Ondblclick/dblclick	This event occurs whenever the user double-clicks on an element. (Execute the script when the mouse is double-clicked)
Onmousedown/mousedown	This event occurs when the mouse button is held down. (execute the script when the mouse button is pressed)
Onmouseup/mouseup	This event occurs when the mouse button is released. (Execute the script when the mouse button is released)
Onmousemove/mousemove	This event occurs when the mouse is moved. (execute the script when the mouse pointer removes an element)
Onmouseout/mouseout	This event occurs when the mouse pointer is removed from the target element. (Execute the script when the mouse pointer removes an element)
Onmouseover/Mouseover	This event occurs when the mouse pointer enters the target element. (execute the script when the mouse pointer moves)

Mootools custom events (mootools custom mouse events)

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

Mootools event name	Description
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 wocould be triggered twice, once for <li> and once again for <A>. (This event is triggered when the mouse enters the specified Element area, and will not be triggered again when the mouse crosses the child element (unlike 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. (This event is triggered when the mouse leaves the specified Element area, and will not be triggered when the child element of this element is not left (different from 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 ). (This event is triggered when the scroll wheel is clicked)

Original translated from: http://cssrainbow.cn/tutorials/mootools/875.html