X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML DOM Events


HTML DOM Events

HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.

Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

Tip: The event model was standardized by the W3C in DOM Level 2.


HTML DOM Events

DOM: Indicates in which DOM Level the property was introduced.

Mouse Events

Event Description DOM
onclick The event occurs when the user clicks on an element 2
oncontextmenu The event occurs when the user right-clicks on an element to open a context menu  
ondblclick The event occurs when the user double-clicks on an element 2
onmousedown The event occurs when a user presses a mouse button over an element 2
onmouseenter The event occurs when the pointer is moved onto an element 2
onmouseleave The event occurs when the pointer a user moves the mouse pointer out of an element 2
onmousemove The event occurs when the pointer is moving while it is over an element 2
onmouseover The event occurs when the pointer is moved onto an element, or onto one of its children 2
onmouseout The event occurs when a user moves the mouse pointer out of an element, or out of one of its children 2
onmouseup The event occurs when a user releases a mouse button over an element 2

Keyboard Events

Event Description DOM
onkeydown The event occurs when the user is pressing a key 2
onkeypress The event occurs when the user presses a key 2
onkeyup The event occurs when the user releases a key 2

Frame/Object Events

Event Description DOM
onabort The event occurs when the loading of a resource has been aborted 2
onerror The event occurs when an error occurs while loading an external file 2
onhashchange The event occurs when there has been changes to the anchor part of the current URL.  
onload The event occurs when an object has loaded 2
onresize The event occurs when a document view is resized 2
onscroll The event occurs when a document view is scrolled 2
onunload The event occurs once a page has unloaded (for <body>) 2

Form Events

Event Description DOM
onblur The event occurs when an element loses focus 2
onchange The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <keygen>, <select>, and <textarea>) 2
onfocus The event occurs when an element gets focus 2
onfocusin The event occurs when an element is about to get focus 2
onfocusout The event occurs when an element is about to lose focus 2
oninput The event occurs when an element gets user input 3
onreset The event occurs when a form is reset 2
onsearch The event occurs when a user writes something in a search field (for <input="search">)  
onselect The event occurs when a user selects some text (for <input> and <textarea>) 2
onsubmit The event occurs when a form is submitted 2

Drag Events

Event Description DOM
ondrag The event occurs when an element is being dragged  
ondragend The event occurs when the user has finished dragging an element  
ondragenter The event occurs when the dragged element enters the drop target  
ondragleave The event occurs when the dragged element leaves the drop target  
ondragover The event occurs when the dragged element is over the drop target  
ondragstart The event occurs when the user starts to drag an element  
ondrop The event occurs when the dragged element is dropped on the drop target  

Clipboard Events

Event Description DOM
oncopy The event occurs when the user copies the content of an element  
oncut The event occurs when the user cuts the content of an element  
onpaste The event occurs when the user pastes some content in an element  

Print Events

Event Description DOM
onafterprint The event occurs when a page has started printing, or if the print dialogue box has been closed  
onbeforeprint The event occurs when a page is about to be printed  

Media Events

Event Description DOM
onabort The event occurs when the loading of an audio/video is aborted  
oncanplay The event occurs when the browser can start playing the audio/video  
oncanplaythrough The event occurs when the browser can play through the audio/video without stopping for buffering  
ondurationchange The event occurs when the duration of the audio/video is changed  
onemptied The event occurs when the current playlist is empty  
onended The event occurs when the audio/video has ended  
onerror The event occurs when an error occurred during the loading of an audio/video  
onloadeddata The event occurs when the browser has loaded the current frame of the audio/video  
onloadedmetadata The event occurs when the browser has loaded meta data for the audio/video  
onloadstart The event occurs when the browser starts looking for the audio/video  
onpause The event occurs when the audio/video has been paused  
onplay The event occurs when the audio/video has been started or is no longer paused  
onplaying The event occurs when the audio/video is ready to play after having been paused or stopped for buffering  
onprogress The event occurs when the browser is downloading the audio/video  
onratechange The event occurs when the playing speed of the audio/video is changed  
onseeked The event occurs when the user is finished moving/skipping to a new position in the audio/video  
onseeking The event occurs when the user starts moving/skipping to a new position in the audio/video  
onstalled The event occurs when the browser is trying to get media data, but data is not available  
onsuspend The event occurs when the browser is intentionally not getting media data  
ontimeupdate The event occurs when the current playback position has changed  
onvolumechange The event occurs when the volume has been changed  
onwaiting The event occurs when the video stops because it needs to buffer the next frame  

Animation Events

Event Description DOM
animationend The event occurs when a CSS animation has completed  
animationiteration The event occurs when a CSS animation is repeated  
animationstart The event occurs when a CSS animation has started  

Transition Events

Event Description DOM
transitionend The event occurs when a CSS transition has completed  

Misc Events

Event Description DOM
ononline The event occurs when the browser starts to work online  
onoffline The event occurs when the browser starts to work offline  

Event Object

Constants

Constant Description DOM
CAPTURING_PHASE The current event phase is the capture phase (3) 1
AT_TARGET The current event is in the target phase, i.e. it is being evaluated at the event target (1) 2
BUBBLING_PHASE The current event phase is the bubbling phase (2) 3

Properties

Property Description DOM
bubbles Returns whether or not an event is a bubbling event 2
cancelable Returns whether or not an event can have its default action prevented 2
currentTarget Returns the element whose event listeners triggered the event 2
eventPhase Returns which phase of the event flow is currently being evaluated 2
target Returns the element that triggered the event 2
timeStamp Returns the time (in milliseconds relative to the epoch) at which the event was created 2
type Returns the name of the event 2

Methods

Method Description DOM
initEvent() Specifies the event type, whether or not the event can bubble, whether or not the event's default action can be prevented 2
preventDefault() To cancel the event if it is cancelable, meaning that any default action normally taken by the implementation as a result of the event will not occur 2
stopPropagation() To prevent further propagation of an event during event flow 2

EventTarget Object

Methods

Method Description DOM
addEventListener() Allows the registration of event listeners on the event target (IE8 = attachEvent()) 2
dispatchEvent() Allows to send the event to the subscribed event listeners (IE8 = fireEvent()) 2
removeEventListener() Allows the removal of event listeners on the event target (IE8 = detachEvent()) 2

EventListener Object

Methods

Method Description DOM
handleEvent() Called whenever an event occurs of the event type for which the EventListener interface was registered 2

DocumentEvent Object

Methods

Method Description DOM
createEvent()   2

MouseEvent/KeyboardEvent Object

Properties

Property Description DOM
altKey Returns whether or not the "ALT" key was pressed when an event was triggered 2
button Returns which mouse button was clicked when an event was triggered 2
clientX Returns the horizontal coordinate of the mouse pointer, relative to the current window, when an event was triggered 2
clientY Returns the vertical coordinate of the mouse pointer, relative to the current window, when an event was triggered 2
ctrlKey Returns whether or not the "CTRL" key was pressed when an event was triggered 2
keyIdentifier Returns the identifier of a key 3
keyLocation Returns the location of the key on the device 3
metaKey Returns whether or not the "meta" key was pressed when an event was triggered 2
relatedTarget Returns the element related to the element that triggered the event 2
screenX Returns the horizontal coordinate of the mouse pointer, relative to the screen, when an event was triggered 2
screenY Returns the vertical coordinate of the mouse pointer, relative to the screen, when an event was triggered 2
shiftKey Returns whether or not the "SHIFT" key was pressed when an event was triggered 2

Methods

Method Description W3C
initMouseEvent() Initializes the value of a MouseEvent object 2
initKeyboardEvent() Initializes the value of a KeyboardEvent object 3


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook