HTML Event Handler Attributes — Complete Reference

What are Event Handler Attributes?

Event handler attributes are special HTML attributes that execute JavaScript code when a specific event occurs. They start with on followed by the event name (e.g. onclick, onmouseover).

While inline event handlers are generally discouraged in modern development (use addEventListener() in JavaScript instead), understanding them is essential for reading legacy code and quick prototyping.

Example Usage

Comparing inline event handler attributes with the modern addEventListener approach.

Inline vs addEventListener

<button onclick="alert('Hello!')">Click Me</button>  <button id="myBtn">Click Me</button> <script> document.getElementById('myBtn') .addEventListener('click', () => alert('Hello!')); </script>

Using addEventListener is preferred because it separates JavaScript logic from HTML structure and supports multiple listeners.

Mouse Events

Events triggered by mouse actions — clicks, movement, hovering, scrolling, and context menus.

Attribute	Description
onclick	Fires when the element is clicked.
ondblclick	Fires when the element is double-clicked.
onmousedown	Fires when a mouse button is pressed down on the element.
onmouseup	Fires when a mouse button is released over the element.
onmouseover	Fires when the mouse pointer moves onto the element.
onmouseout	Fires when the mouse pointer moves out of the element.
onmouseenter	Fires when the mouse pointer enters the element. Does not bubble.
onmouseleave	Fires when the mouse pointer leaves the element. Does not bubble.
onmousemove	Fires when the mouse pointer moves while over the element.
onauxclick	Fires when a non-primary pointer button is clicked (e.g. middle or right mouse button).
oncontextmenu	Fires when the context menu is triggered (usually right-click).
onwheel	Fires when the mouse wheel is rotated over the element.
onmousewheelDeprecated	Fires on mouse wheel rotation. Use onwheel instead.

Keyboard Events

Events triggered when the user presses or releases keys on their keyboard.

Attribute	Description
onkeydown	Fires when a key is pressed down.
onkeyup	Fires when a key is released.
onkeypressDeprecated	Fires when a key is pressed and released. Use onkeydown instead.

Focus Events

Events triggered when elements gain or lose focus through clicks, taps, or keyboard navigation.

Attribute	Description
onfocus	Fires when the element receives focus.
onblur	Fires when the element loses focus.
onfocusin	Fires when the element is about to receive focus. Bubbles unlike onfocus.
onfocusout	Fires when the element is about to lose focus. Bubbles unlike onblur.

Form Events

Events related to form submission, validation, and changes in form control values.

Attribute	Description
onsubmit	Fires when a form is submitted.
onreset	Fires when a form is reset.
onchange	Fires when the value of an input, select, or textarea changes and the element loses focus.
oninput	Fires immediately when the value of an input element changes.
onbeforeinput	Fires before the value of an input element is modified.
oninvalid	Fires when a form element fails constraint validation.
onformdata	Fires when a FormData object is constructed from a form.
onselect	Fires when text is selected inside an input or textarea.
onselectionchange	Fires when the text selection within the document or an input changes.
onselectstart	Fires when the user starts a new text selection.

Clipboard Events

Events triggered when the user copies, cuts, or pastes content using the clipboard.

Attribute	Description
oncopy	Fires when the user copies content from the element.
oncut	Fires when the user cuts content from the element.
onpaste	Fires when the user pastes content into the element.

Drag & Drop Events

Events fired during drag-and-drop operations on draggable elements and drop targets.

Attribute	Description
ondrag	Fires continuously while an element is being dragged.
ondragstart	Fires when the user starts dragging an element.
ondragend	Fires when a drag operation ends (mouse released or Escape pressed).
ondragenter	Fires when a dragged element enters a valid drop target.
ondragleave	Fires when a dragged element leaves a valid drop target.
ondragover	Fires continuously while a dragged element is over a valid drop target.
ondrop	Fires when a dragged element is dropped on a valid drop target.

Touch Events

Events triggered by touch interactions on touch-enabled devices like phones and tablets.

Attribute	Description
ontouchstart	Fires when a touch point is placed on the touch surface.
ontouchend	Fires when a touch point is removed from the touch surface.
ontouchmove	Fires when a touch point is moved along the touch surface.
ontouchcancel	Fires when a touch point is disrupted (e.g. too many touch points).

Pointer Events

A unified event model for mouse, touch, and pen input — works across all pointer types.

Attribute	Description
onpointerdown	Fires when a pointer becomes active (mouse press, touch, pen).
onpointerup	Fires when a pointer is no longer active.
onpointermove	Fires when a pointer changes coordinates.
onpointerenter	Fires when a pointer enters the element boundaries. Does not bubble.
onpointerleave	Fires when a pointer leaves the element boundaries. Does not bubble.
onpointerover	Fires when a pointer moves into the element. Bubbles.
onpointerout	Fires when a pointer moves out of the element. Bubbles.
onpointercancel	Fires when the browser determines a pointer event is unlikely to fire more events.
ongotpointercapture	Fires when the element captures a pointer using setPointerCapture().
onlostpointercapture	Fires when a captured pointer is released.
onpointerrawupdate	Fires for every pointer change that doesn't fire pointermove (high-frequency updates).

Scroll Events

Events fired when an element or the viewport is scrolled, including scroll-snap events.

Attribute	Description
onscroll	Fires when the element is scrolled.
onscrollend	Fires when scrolling has completed.
onscrollsnapchange	Fires when a scroll snap target changes (experimental).
onscrollsnapchanging	Fires when a scroll snap target is about to change (experimental).

Animation Events

Events fired during CSS animation and transition lifecycles — start, end, iteration, and cancel.

Attribute	Description
onanimationstart	Fires when a CSS animation starts.
onanimationend	Fires when a CSS animation ends.
onanimationiteration	Fires when a CSS animation completes one iteration.
onanimationcancel	Fires when a CSS animation is cancelled.
ontransitionrun	Fires when a CSS transition is first created.
ontransitionstart	Fires when a CSS transition actually starts.
ontransitionend	Fires when a CSS transition completes.
ontransitioncancel	Fires when a CSS transition is cancelled.

Media Events

Events for audio and video elements — playback, buffering, seeking, and metadata loading.

Attribute	Description
onplay	Fires when media playback begins.
onpause	Fires when media playback is paused.
onplaying	Fires when media starts playing after being paused or buffered.
onended	Fires when media playback reaches the end.
oncanplay	Fires when the browser can start playing the media.
oncanplaythrough	Fires when the browser estimates it can play through media without buffering.
onloadeddata	Fires when the first frame of media data has been loaded.
onloadedmetadata	Fires when media metadata (duration, dimensions) has been loaded.
onloadstart	Fires when the browser starts loading the media resource.
onprogress	Fires periodically while the browser is downloading media data.
ondurationchange	Fires when the duration attribute of the media changes.
onratechange	Fires when the playback rate changes.
onseeked	Fires when a seek operation completes.
onseeking	Fires when a seek operation begins.
onstalled	Fires when the browser is trying to fetch media data but it is unexpectedly not available.
onsuspend	Fires when media data loading has been suspended.
ontimeupdate	Fires when the current playback time changes.
onvolumechange	Fires when the volume or muted state changes.
onwaiting	Fires when playback stops because the next frame is not available.
onemptied	Fires when the media element is reset to its initial state.
onabort	Fires when media resource loading is aborted (not due to error).
oncuechange	Fires when a text track's active cues change.

Loading Events

Events fired when resources finish loading or fail to load.

Attribute	Description
onload	Fires when a resource and its dependencies have finished loading.
onerror	Fires when a resource fails to load or a script error occurs.

Miscellaneous Events

Events for dialogs, popovers, fullscreen, Web Components, security, and other browser APIs.

Attribute	Description
onresize	Fires when the document view (window) has been resized.
ontoggle	Fires when a details element is opened or closed, or a popover toggles.
onbeforetoggle	Fires before a popover or details element toggles its state.
onclose	Fires when a dialog element is closed.
oncancel	Fires when the user dismisses a dialog (e.g. pressing Escape).
oncommand	Fires when an element invokes a command on another element.
onslotchange	Fires when the content distributed into a slot element changes.
onsecuritypolicyviolation	Fires when a Content Security Policy (CSP) violation occurs.
onfullscreenchange	Fires when the element enters or exits fullscreen mode.
onfullscreenerror	Fires when an attempt to enter fullscreen mode fails.
oncontentvisibilityautostatechange	Fires when an element with content-visibility: auto starts or stops being rendered.
oncontextlost	Fires when a canvas rendering context is lost.
oncontextrestored	Fires when a canvas rendering context is restored.

Tip: In modern JavaScript, prefer element.addEventListener('event', handler) over inline HTML event attributes for better separation of concerns, easier debugging, and support for multiple event listeners.