Element Interface

Element nodes in HTML documents have properties and methods that help us locate specific elements on a webpage. Using methods such as getElementsByTagName() and getElementById(), we can easily parse the document and find what we need without searching from the root parent element.

Events

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

beforematch Experimental: Fires on an element that is in the hidden until found state, when the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation.
cancel: Fires on a <dialog> when the user instructs the browser that they wish to dismiss the currently open modal dialog. The browser fires this event when the user presses the Esc key to close the modal dialog.
contentvisibilityautostatechange Experimental: Fires on any element with content-visibility: auto set on it when it starts or stops being relevant to the user and skipping its contents.
error: Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
scroll: Fired when the document view or an element has been scrolled.
securitypolicyviolation: Fired when a Content Security Policy is violated.
select: Fired when some text has been selected.
wheel: Fired when the user rotates a wheel button on a pointing device (typically a mouse).

Clipboard events

copy: Fired when the user initiates a copy action through the browser's user interface. Also available via the oncopy property.
cut: Fired when the user initiates a cut action through the browser's user interface. Also available via the oncut property.
paste: Fired when the user initiates a paste action through the browser's user interface. Also available via the onpaste property.

Composition events

compositionend: Fired when a text composition system such as an input method editor completes or cancels the current composition session.
compositionstart: Fired when a text composition system such as an input method editor starts a new composition session.
compositionupdate: Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor.

Focus events

blur: Fired when an element has lost focus.
focus: Fired when an element has gained focus.
focusin: Fired when an element has gained focus, after focus.
focusout: Fired when an element has lost focus, after blur.

Fullscreen events

fullscreenchange: Sent to an Element when it transitions into or out of fullscreen mode.
fullscreenerror: Sent to an Element if an error occurs while attempting to switch it into or out of fullscreen mode.

Keyboard events

keydown: Fired when a key is pressed.
keypress Deprecated: Fired when a key that produces a character value is pressed down.
keyup: Fired when a key is released.

Mouse events

auxclick: Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
click: Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
contextmenu: Fired when the user attempts to open a context menu.
dblclick: Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
DOMActivate Deprecated: Occurs when an element is activated, for instance, through a mouse click or a keypress.
mousedown: Fired when a pointing device button is pressed on an element.
mouseenter: Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
mouseleave: Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
mousemove: Fired when a pointing device (usually a mouse) is moved while over an element.
mouseout: Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
mouseover: Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
mouseup: Fired when a pointing device button is released on an element.
webkitmouseforcechanged Non-standard: Fired each time the amount of pressure changes on the trackpadtouchscreen.
webkitmouseforcedown Non-standard: Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
webkitmouseforcewillbegin Non-standard: Fired before the mousedown event.
webkitmouseforceup Non-standard: Fired after the webkitmouseforcedown event as soon as the pressure has been reduced sufficiently to end the "force click".

Touch events

touchcancel: Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
touchend: Fired when one or more touch points are removed from the touch surface.
touchmove: Fired when one or more touch points are moved along the touch surface.
touchstart: Fired when one or more touch points are placed on the touch surface.