HTML Mastery · Chapter 14

HTML Event Attributes

HTML event attributes add inline JavaScript handlers directly to elements. While modern development prefers addEventListener(), understanding all event attributes is essential for any HTML developer.

Best Practice: Prefer element.addEventListener('click', handler) over inline onclick="..." attributes. Inline handlers mix HTML and JavaScript, making code harder to maintain, test, and secure (CSP blocks inline event handlers by default).

Live Event Demo

Event Log

Waiting for events...

🖱️ Mouse Events

Attribute	Fires When	Applies To
onclick	Mouse button is clicked (pressed and released) on the element.	All visible elements
ondblclick	Mouse button is double-clicked on the element.	All visible elements
onmousedown	Mouse button is pressed (not yet released) over the element.	All visible elements
onmouseup	Mouse button is released over the element.	All visible elements
onmousemove	Mouse pointer is moved while over the element. Fires rapidly.	All visible elements
onmouseenter	Mouse pointer enters the element's boundaries. Does NOT bubble.	All visible elements
onmouseleave	Mouse pointer leaves the element's boundaries. Does NOT bubble.	All visible elements
onmouseover	Mouse pointer enters element or any of its descendants. Bubbles up.	All visible elements
onmouseout	Mouse pointer leaves element or any of its descendants. Bubbles up.	All visible elements
oncontextmenu	Right-click (context menu) is triggered. Can be prevented to create custom menus.	All visible elements
onwheel	Mouse wheel is scrolled over the element.	All visible elements

⌨️ Keyboard Events

Attribute	Fires When	Notes
onkeydown	A key is pressed (any key). Fires before character appears.	Use `event.key` for the key name, `event.code` for the physical key.
onkeyup	A key is released.	Use for "submit on Enter" patterns.
onkeypress	Deprecated. Formerly fired when a key producing a character is pressed.	Use `onkeydown` instead.

📋 Form Events

Attribute	Fires When	Best Used On
onsubmit	Form is submitted (via button click or Enter key). Return `false` to prevent submission.	`<form>`
onreset	Form's reset button is clicked, restoring all fields to default values.	`<form>`
oninput	Value changes with each keystroke or paste. Fires immediately on every change.	Inputs, textareas
onchange	Value changes AND element loses focus (for text) or immediately on selection (for checkboxes, selects).	All form elements
onfocus	Element receives focus (tab or click). Does not bubble.	All form elements
onblur	Element loses focus. Does not bubble. Good for validation on departure.	All form elements
onfocusin	Element receives focus. Bubbles (unlike `onfocus`).	All elements
onfocusout	Element loses focus. Bubbles (unlike `onblur`).	All elements
oninvalid	Input fails validation when form is submitted (e.g., required field is empty).	Form elements
onsearch	User submits a search field (type="search") via Enter or clicking the X to clear.	`<input type="search">`
onselect	User selects text inside the input or textarea.	Inputs, textareas

🌐 Window & Document Events (on <body>)

Attribute	Fires When
onload	Page and all resources (images, scripts) have finished loading. Use on `<body>` or `<img>`.
onunload	Page is about to be unloaded (deprecated/unreliable). Prefer `onpagehide` or the Beacon API.
onbeforeunload	Page is about to close/navigate away. Return a string to show a "leave page?" confirmation dialog.
onresize	Browser window is resized. Fires rapidly — use debouncing.
onscroll	Element is scrolled. Fires rapidly — use throttling or IntersectionObserver instead.
onerror	An error occurs while loading a resource (image, script) or when a JavaScript error is uncaught.
onhashchange	The URL hash (#fragment) changes.
onpopstate	The active history entry changes (browser back/forward).
onstorage	localStorage or sessionStorage changes in another tab/window.
ononline / onoffline	Browser goes online or offline (network status changes).

🖱️ Drag & Drop Events

Attribute	Fires On	Purpose
ondragstart	Drag source	When the user starts dragging an element. Set `event.dataTransfer.setData()` here.
ondrag	Drag source	Fires continuously while element is being dragged.
ondragend	Drag source	When the drag operation ends (drop or cancel).
ondragenter	Drop target	When dragged item enters the drop zone. Add visual feedback here.
ondragover	Drop target	Fires while dragged over. Must call `event.preventDefault()` to allow dropping.
ondragleave	Drop target	When dragged item leaves the drop zone. Remove visual feedback.
ondrop	Drop target	When the item is dropped. Read data via `event.dataTransfer.getData()`.

🎬 Media Events (Audio & Video)

Attribute	Fires When
onplay	Playback begins.
onpause	Playback is paused.
onended	Media reaches its end.
ontimeupdate	Current playback position changes (fires about 4 times/second during playback).
onvolumechange	Volume or muted state changes.
onseeking	User starts seeking to a new position.
onseeked	Seeking operation completes.
onloadedmetadata	Metadata (duration, dimensions) has loaded.
oncanplay	Enough data loaded to begin playing without buffering pause.
onwaiting	Playback paused while waiting for more data to buffer.
onratechange	Playback speed changes.
onerror	Media loading fails.

📱 Touch Events

Attribute	Fires When
ontouchstart	A touch point is placed on the surface.
ontouchmove	A touch point moves across the surface.
ontouchend	A touch point is removed from the surface.
ontouchcancel	Touch event is interrupted (e.g., alert appears).

🖊️ Pointer Events (Unified Mouse + Touch + Pen)

Attribute	Fires When
onpointerdown	Any pointer device (mouse, touch, pen) makes contact.
onpointerup	Pointer device is released.
onpointermove	Pointer device moves.
onpointerenter	Pointer enters element (no bubble).
onpointerleave	Pointer leaves element (no bubble).
onpointerover	Pointer enters element or descendant (bubbles).
onpointerout	Pointer leaves element or descendant (bubbles).
onpointercancel	Pointer event is cancelled (device goes out of range).
ongotpointercapture	Element receives pointer capture.
onlostpointercapture	Element loses pointer capture.

Chapter Summary

Prefer addEventListener() over inline event attributes for production code
Use oninput for real-time updates; onchange for after-edit validation
Use Pointer Events instead of separate Mouse + Touch Events for unified cross-device handling
For ondrop to work, you must call event.preventDefault() inside ondragover
Throttle/debounce onresize, onscroll, onmousemove — they fire extremely rapidly

HTML Mastery — Chapter 14: HTML Media — Video & Audio

HTML Event Attributes

Live Event Demo

Chapter Summary

Learner Reviews