HTML Events

HTML Event Reference

Events are actions or occurrences detected by the browser, such as a user clicking a button, entering text, submitting a form, pressing a key, or loading a page.

JavaScript can listen for these events and respond when they occur. HTML also provides event handler attributes such as onclick, oninput, and onsubmit, although JavaScript event listeners are generally preferred for separating behavior from HTML markup.

Mouse Events

Mouse events occur when a pointing device interacts with an element, including clicking, double-clicking, and moving the pointer over or away from an element.

Keyboard Events

Keyboard events occur when a user presses or releases a key while interacting with the webpage.

The older keypress event is deprecated and should not be used for new webpages. Use keydown or keyup instead.

Form & Input Events

Form and input events occur when users enter data, change form controls, submit forms, or reset form values.

Focus Events

Focus events occur when an element receives or loses keyboard or programmatic focus.

Clipboard Events

Clipboard events occur when content is copied, cut, or pasted using the clipboard.

Drag & Drop Events

Drag-and-drop events are generated while draggable content is picked up, moved, placed over a potential drop target, or dropped.

Media Events

Audio and video elements generate events as media loads, plays, pauses, seeks, changes volume, and reaches the end of playback.

Window & Document Events

Window and document-related events can indicate when resources load, errors occur, the page is resized or scrolled, or other browser-level activity takes place.

Using Event Handlers

An HTML event handler attribute places JavaScript directly in the element. For example, the onclick attribute can respond when a button is activated.

<button type="button" onclick="alert('Hello!')">Click Me</button>

For larger scripts, JavaScript can register an event listener instead. This keeps the HTML markup separate from the behavior of the page.

<button type="button" id="example-button">Click Me</button>

<script>
const button = document.querySelector('#example-button');

button.addEventListener('click', function () {
  alert('Hello!');
});
</script>

Event listeners can also make it easier to attach multiple handlers and manage event behavior without adding JavaScript to individual HTML attributes.