Easy Tutorial
❮ Prop Keygen Type Met Console Error ❯

HTML DOM


HTML DOM Events

HTML DOM events allow JavaScript to register different event handlers within HTML document elements.

Events are often used in conjunction with functions, which are not executed before the event occurs! (e.g., when a user clicks a button).

Tip: The event model is standardized in the W3C Level 2 DOM Events specification.


HTML DOM Events

DOM: Specifies the DOM property level used.

Mouse Events

Property Description DOM
onclick The event handler called when a user clicks an object. 2
oncontextmenu Triggered when a user opens the context menu by right-clicking the mouse.
ondblclick The event handler called when a 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 an element. 2
onmousemove The mouse is moved. 2
onmouseover The mouse moves over an element. 2
onmouseout The mouse moves out of an element. 2
onmouseup The mouse button is released. 2

Keyboard Events

Property Description DOM
onkeydown A keyboard key is pressed. 2
onkeypress A keyboard key is pressed and released. 2
onkeyup A keyboard key is released. 2

Frame/Object Events

Property Description DOM
onabort The loading of an image is interrupted. ( <object>) 2
onbeforeunload The event is triggered when the page is about to be left (refresh or close). 2
onerror An error occurs while loading a document or image. ( <object>, <body>, and <frameset>)
onhashchange The event is triggered when the anchor part of the current URL is modified.
onload A page or an image is fully loaded. 2
onpageshow The event is triggered when a user accesses a page.
onpagehide The event is triggered when a user leaves the current page to go to another.
onresize The window or frame is resized. 2
onscroll The event occurs when the document is scrolled. 2
onunload The user exits the page. ( <body> and <frameset>) 2

Form Events

Property Description DOM
onblur Triggered when an element loses focus. 2
onchange The event is triggered when the content of a form element changes ( <input>, <keygen>, <select>, and <textarea>). 2
onfocus Triggered when an element gains focus. 2
onfocusin Triggered when an element is about to gain focus. 2
onfocusout Triggered when an element is about to lose focus. 2
oninput Triggered when an element receives user input. 3
onreset Triggered when a form is reset. 2
onsearch Triggered when a user inputs text into a search field ( <input="search">).
onselect Triggered when a user selects text ( <input> and <textarea>). 2
onsubmit Triggered when a form is submitted. 2

Clipboard Events

Property Description DOM
oncopy The event is triggered when a user copies the content of an element.
oncut The event is triggered when a user cuts the content of an element.
onpaste The event is triggered when a user pastes content into an element.

Print Events

Property Description DOM
onafterprint The event is triggered when the page has started printing or the print window has closed.
onbeforeprint The event is triggered when the page is about to start printing.

Drag Events

Event Description DOM
ondrag The event is triggered when an element is being dragged.
ondragend The event is triggered when a user finishes dragging an element.
ondragenter The event is triggered when a dragged element enters the drop target.
ondragleave The event is triggered when a dragged element leaves the drop target.
ondragover The event is triggered when a dragged element is over the drop target.
ondragstart The event is triggered when a user starts dragging an element.
ondrop The event is triggered when a dragged element is dropped in the target area.

Multimedia (Media) Events

Event Description DOM
onabort The event is triggered when the loading of a video/audio (audio/video) is aborted.
oncanplay The event is triggered when a user can start playing a video/audio (audio/video).
oncanplaythrough The event is triggered when a video/audio (audio/video) can be played all the way through without stopping for buffering.
ondurationchange The event is triggered when the duration of a video/audio (audio/video) changes.
onemptied Triggered when the current playlist is empty.
onended The event is triggered when a video/audio (audio/video) playback ends.
onerror The event is triggered when an error occurs during the loading of a video/audio (audio/video) data.
onloadeddata The event is triggered when the browser loads the current frame of a video/audio (audio/video).
onloadedmetadata The event is triggered after the metadata of a specified video/audio (audio/video) is loaded.
onloadstart The event is triggered when the browser starts looking for the specified video/audio (audio/video).
onpause The event is triggered when a video/audio (audio/video) is paused.
onplay The event is triggered when a video/audio (audio/video) starts playing.
onplaying The event is triggered when a video/audio (audio/video) is paused or after buffering and is ready to resume playing.
onprogress The event is triggered when the browser downloads a specified video/audio (audio/video).
onratechange The event is triggered when the playback speed of a video/audio (audio/video) changes.
onseeked The event is triggered after a user repositions the playback position of a video/audio (audio/video).
onseeking The event is triggered when a user starts repositioning the playback position of a video/audio (audio/video).
onstalled The event is triggered when the browser is trying to get media data, but the data is not available.
onsuspend The event is triggered when the browser stops fetching media data.
ontimeupdate The event is triggered when the current playback position changes.
onvolumechange The event is triggered when the volume changes.
onwaiting The event is triggered when a video needs to buffer the next frame.

Animation Events

Event Description DOM
animationend This event is triggered when a CSS animation finishes playing.
animationiteration This event is triggered when a CSS animation repeats playing.
animationstart This event is triggered when a CSS animation starts playing.

Transition Events

Event Description DOM
transitionend This event is triggered after a CSS transition completes.

Other Events

Event Description DOM
onmessage This event is triggered when a message is received from an object (WebSocket, Web Worker, Event Source, or child frame or parent window).
onmousewheel Deprecated. Use onwheel
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 the window (history object) changes.
onshow This event is triggered when a <menu> element is displayed in the context menu.
onstorage This event is triggered when Web Storage (HTML 5 Web Storage) is updated.
ontoggle This event is triggered when the user opens or closes a <details> element.
onwheel This event is triggered when the mouse wheel scrolls up or down over an element.

Event Object

Constants

Static Variable Description DOM
CAPTURING-PHASE The current event phase is the capture phase (1). 1
AT-TARGET The current event is in the target phase, evaluating the target event (1). 2
BUBBLING-PHASE The current event is in the bubbling phase (3). 3

Properties

Property Description DOM
bubbles Returns a boolean indicating whether the event is a bubbling event type. 2
cancelable Returns a boolean indicating whether the event can have its default action canceled. 2
currentTarget Returns the element whose event listeners triggered the event. 2
eventPhase Returns the current phase of event propagation. 2
target Returns the element that triggered this event (the target node). 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

Methods

Method Description DOM
initEvent() Initializes the properties of a newly created Event object. 2
preventDefault() Informs the browser not to perform the default action associated with the event. 2
stopPropagation() Stops further dispatch of the event. 2

Target Event Object

Methods

Method Description DOM
addEventListener() Allows registering event listeners within the target event (IE8 = attachEvent()). 2
dispatchEvent() Allows sending events to listeners (IE8 = fireEvent()). 2
removeEventListener() Executes once registered event listeners on the event target (IE8 = detachEvent()). 2

Event Listener Object

Methods

Method Description DOM
handleEvent() Registers any object as an event handler. 2

Document Event Object

Methods

Method Description DOM
createEvent() 2

Mouse/Keyboard Event Object

Properties

Property Description DOM
altKey Returns whether the "ALT" key was pressed when the event was triggered. 2
button Returns which mouse button was clicked when the event was triggered. 2
clientX Returns the horizontal coordinate of the mouse pointer when the event was triggered. 2
clientY Returns the vertical coordinate of the mouse pointer when the event was triggered. 2
ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered. 2
charCode Returns the character code of the key value that triggered the onkeypress event. 2
key Returns the identifier of the key pressed when the event is triggered. 3
keyCode Returns the character code of the key value that triggered the onkeypress event, or the key code for onkeydown or onkeyup events. 2
which Returns the character code of the key value that triggered the onkeypress event, or the key code for onkeydown or onkeyup events. 2
metaKey Returns whether the "meta" key was pressed when the event was triggered. 2
relatedTarget Returns the node related to the target node of the event. 2
screenX Returns the horizontal coordinate 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 was pressed when the event was triggered. 2

Methods

Method Description W3C
initMouseEvent() Initializes the values of a mouse event object. 2
initKeyboardEvent() Initializes the values of a keyboard event object. 3
❮ Prop Keygen Type Met Console Error ❯