Resources from: http://www.runoob.com/jsref/dom-obj-event.htmlhttp://www.runoob.com/jsref/ Met-element-addeventlistener.html←html Dom Property Object HTML DOM Anchor object →html DomEvents HTML DOM Events
HTML DOM events allow JavaScript to register different event handlers in HTML document elements.
Events are often used in conjunction with functions, and functions are not executed until the event occurs! (such as when the user clicks the button).
Tip: The event model is regulated in the 2-level DOM event.
HTML DOM Events
DOM: indicates the DOM attribute level used.
Mouse events
| Properties |
Description |
DOM |
| OnClick |
The event handle that is invoked when the user taps an object. |
2 |
| OnContextMenu |
Triggered when the user clicks the right mouse button to open the context menu |
|
| OnDblClick |
The event handle that is invoked when the user double-clicks an object. |
2 |
| OnMouseDown |
The mouse button is pressed. |
2 |
| Onmouseenter |
triggered when the mouse pointer moves over an element. |
2 |
| OnMouseLeave |
triggered when the mouse pointer moves out of the element |
2 |
| OnMouseMove |
The mouse is moved. |
2 |
| onmouseover |
Move the mouse over an element. |
2 |
| onmouseout |
The mouse moves away from an element. |
2 |
| OnMouseUp |
The mouse button is loosened. |
2 |
Keyboard events
| Properties |
Description |
DOM |
| OnKeyDown |
One of the keyboard keys is pressed. |
2 |
| onkeypress |
One of the keyboard keys is pressed and released. |
2 |
| OnKeyUp |
A keyboard key is released. |
2 |
Frame/object (Frame/object) events
| Properties |
Description |
DOM |
| Onabort |
The loading of the image is interrupted. (<object>) |
2 |
| onBeforeUnload |
This event is triggered when the page is about to leave (refresh or close) |
2 |
| OnError |
An error occurred while loading the document or image. (<object>, <body> and <frameset>) |
|
| Onhashchange |
This event is triggered when modifications occur to the anchor portion of the current URL. |
|
| OnLoad |
A page or an image to finish loading. |
2 |
| Onpageshow |
This event is triggered when a user accesses a page |
|
| Onpagehide |
This event is triggered when a user leaves the current page to jump to another page |
|
| OnResize |
The window or frame is resized. |
2 |
| Onscroll |
The event that occurs when the document is scrolled. |
2 |
| OnUnload |
The user exits the page. (<body> and <frameset>) |
2 |
Form Events
| Properties |
description |
DOM |
| onblur |
element triggers when it loses focus |
2 |
| onchange |
This event is triggered when the contents of the form element change (<input> , <keygen>, <select>, and <textarea>) |
2 |
| onfocus |
element when getting focus Trigger |
2 |
| onfocusin |
element to be triggered when focus is being taken |
2 |
| onf Ocusout when the |
element is about to lose focus |
2 |
| oninput |
element triggers when user input is obtained |
3 |
| onreset |
trigger when form reset |
2 |
| onsearch |
user input to search domain Triggers when text is triggered (<input= "search" >) |
|
| onselect |
when user picks text (<INPUT&G T and <textarea>) |
2 |
| onsubmit |
form submitted when |
2 |
Clipboard events
| Properties |
Description |
DOM |
| Oncopy |
This event is triggered when the user copies the content of the element |
|
| Oncut |
This event is triggered when the user cuts the content of the element |
|
| Onpaste |
This event is triggered when the user pastes the content of the element |
|
Print Event
| Properties |
Description |
DOM |
| Onafterprint |
The event is triggered when the page has already started printing, or when the print window is closed |
|
| Onbeforeprint |
This event is triggered when the page is about to start printing |
|
Drag events
| Events |
Description |
DOM |
| Ondrag |
This event is triggered when an element is being dragged |
|
| Ondragend |
This event is triggered when the user completes the drag of the element |
|
| OnDragEnter |
This event is triggered when the dragged element enters the drop target |
|
| OnDragLeave |
This event is triggered when the drag element leaves the drop target |
|
| OnDragOver |
The event is triggered when the drag element is on the drop target |
|
| Ondragstart |
This event is triggered when the user starts to drag an element |
|
| OnDrop |
This event is triggered when the drag element is placed in the target area |
|
Multimedia (media) events
| Events |
Description |
DOM |
| Onabort |
Event is triggered when video/audio (audio/video) terminates loading. |
|
| Oncanplay |
The event is triggered when the user can start playing video/audio (audio/video). |
|
| Oncanplaythrough |
The event is triggered when video/audio (Audio/video) can play normally without pausing and buffering. |
|
| Ondurationchange |
Event is triggered when the length of the video/audio (Audio/video) is changed. |
|
| Onemptied |
Triggered when the playlist is empty |
|
| onended |
Event is triggered at the end of video/audio (audio/video) playback. |
|
| OnError |
Event is triggered when an error occurs during video/audio (audio/video) data loading. |
|
| Onloadeddata |
Event triggers when the browser loads the current frame of video/audio (audio/video). |
|
| Onloadedmetadata |
The event is triggered after the metadata for the specified video/audio (Audio/video) is loaded. |
|
| Onloadstart |
The event starts looking for the specified video/audio (Audio/video) trigger in the browser. |
|
| OnPause |
Event is triggered when video/audio (Audio/video) is paused. |
|
| Onplay |
The event is triggered when video/audio (Audio/video) starts playing. |
|
| Onplaying |
The event is triggered when the video/audio (Audio/video) is paused or when it is ready to resume playback after buffering. |
|
| OnProgress |
Event is triggered when the browser downloads the specified video/audio (audio/video). |
|
| Onratechange |
The event is triggered when the playback speed of the video/audio (Audio/video) sends changes. |
|
| Onseeked |
The event is triggered after the user repositions the playback position of the video/audio (audio/video). |
|
| Onseeking |
The event is triggered when the user starts to reposition video/audio (audio/video). |
|
| Onstalled |
The event gets media data in the browser, but is triggered when the media data is not available. |
|
| Onsuspend |
Event triggered when the browser reads media data aborted. |
|
| Ontimeupdate |
Event is triggered when the current playback location sends a change. |
|
| Onvolumechange |
The event is triggered when the volume changes. |
|
| Onwaiting |
The event is triggered when the video needs buffering due to the next frame being played. |
|
Animated events
| Events |
Description |
DOM |
| Animationend |
This event is triggered when the CSS animation finishes playing |
|
| Animationiteration |
This event is triggered when the CSS animation repeats |
|
| Animationstart |
This event is triggered when the CSS animation starts playing |
|
Transition events
| Events |
Description |
DOM |
| Transitionend |
This event is triggered after the CSS completes the transition. |
|
Other events
| Events |
Description |
DOM |
| OnMessage |
This event is triggered when a message is received by or from an object (WebSocket, Web Worker, Event Source, or child frame or parent window) |
|
| OnMouseWheel |
is obsolete. Using the Onwheel event override |
|
| Ononline |
This event is triggered when the browser starts working online. |
|
| Onoffline |
This event is triggered when the browser starts working offline. |
|
| Onpopstate |
This event is triggered when the browsing history of a window has changed. |
|
| OnShow |
This event is triggered when the <menu> element is displayed in the context menu |
|
| Onstorage |
This event is triggered when the Web Storage (HTML 5 Web Store) is updated |
|
| Ontoggle |
This event is triggered when the user opens or closes the <details> element |
|
| Onwheel |
This event is triggered when the mouse wheel scrolls up or down the element |
|
Event Object Constants
| Static Variables |
Description |
DOM |
| Capturing-phase |
The current event stage is the capture phase (3) |
1 |
| At-target |
The current event is the target stage, in the evaluation target event (1) |
2 |
| Bubbling-phase |
The current event is the bubbling phase (2) |
3 |
Property
| Properties |
Description |
DOM |
| Bubbles |
Returns a Boolean value that indicates whether the event is a bubbling event type. |
2 |
| Cancelable |
Returns a Boolean value that indicates whether the event can hold a default action that can be canceled. |
2 |
| Currenttarget |
Returns the element whose event listener triggered the event. |
2 |
| Eventphase |
Returns the current stage of event propagation. |
2 |
| Target |
Returns the element that triggered this event (the target node of the event). |
2 |
| TimeStamp |
Returns the date and time the event was generated. |
2 |
| Type |
Returns the name of the event represented by the current event object. |
2 |
Method
| Method |
Description |
DOM |
| Initevent () |
Initializes the properties of the newly created Event object. |
2 |
| Preventdefault () |
Notifies the browser not to perform the default action associated with the event. |
2 |
| Stoppropagation () |
No more events are being dispatched. |
2 |
Target Event Object method
| Method |
Description |
DOM |
| AddEventListener () |
Allow listener events to be registered in the target event (IE8 = attachevent ()) |
2 |
| Dispatchevent () |
Allow sending events to the listener (IE8 = fireEvent ()) |
2 |
| RemoveEventListener () |
Run a listener event registered on the event target (IE8 = DetachEvent ()) |
2 |
Event Listener Object Methods
| Method |
Description |
DOM |
| Handleevent () |
Registering an arbitrary object as an event handler |
2 |
Document Event Object Methods
| Method |
Description |
DOM |
| CreateEvent () |
|
2 |
Mouse/Keyboard Event object Properties
| Properties |
Description |
DOM |
| Altkey |
Returns whether "ALT" is pressed when the event is triggered. |
2 |
| button |
Returns which mouse button is clicked when the event is triggered. |
2 |
| ClientX |
Returns the horizontal coordinates of the mouse pointer when the event is triggered. |
2 |
| ClientY |
Returns the vertical coordinate of the mouse pointer when the event is triggered. |
2 |
| Ctrlkey |
Returns whether the "CTRL" key is pressed when the event is triggered. |
2 |
| Location |
Returns the position of the key on the device |
3 |
| CharCode |
Returns the letter code for the onkeypress Event trigger key value. |
2 |
| Key |
Returns the key identifier when the key is pressed. |
3 |
| KeyCode |
Returns the code for the character code of the value of the onkeypress event-triggered key, or the key for the onkeydown or onkeyup event. |
2 |
| which |
Returns the code for the character code of the value of the onkeypress event-triggered key, or the key for the onkeydown or onkeyup event. |
2 |
| Metakey |
Returns whether the "meta" key is pressed when the event is triggered. |
2 |
| Relatedtarget |
Returns the node associated with the target node of the event. |
2 |
| ScreenX |
Returns the horizontal coordinates of the mouse pointer when an event is triggered. |
2 |
| ScreenY |
Returns the vertical coordinate of the mouse pointer when an event is triggered. |
2 |
| Shiftkey |
Returns whether the "SHIFT" key is pressed when the event is triggered. |
2 |
Method
| Method |
Description |
| the
| Initmouseevent () |
Initialize the value of the mouse event object |
2 |
| Initkeyboardevent () |
Initialize the value of the keyboard event object |
3 |
←html Dom Property Object HTML Dom Anchor object
HTML DOM Events
