HTML Events Reference

Badar KhalilUpdated September 27, 2026 2 min read

HTML Events Reference

This HTML events reference covers every major event type available in HTML5, showing you how to detect and respond to user actions like clicks, key presses, form changes, and page loading. Understanding HTML events is essential for building interactive, responsive web pages.

What Are HTML Events?

An HTML event is something that happens to an element — the user clicks a button, a page finishes loading, a value changes in a form field. JavaScript can 'listen' for these events and run code in response, using either inline event attributes or the modern addEventListener() method.

1. Mouse Events

Event	Description
onclick	Fires when an element is clicked
ondblclick	Fires on double-click
onmousedown	Fires when a mouse button is pressed down
onmouseup	Fires when a mouse button is released
onmouseover	Fires when the pointer enters an element
onmouseout	Fires when the pointer leaves an element
onmousemove	Fires continuously as the pointer moves over an element

2. Keyboard Events

Event	Description
onkeydown	Fires when a key is pressed down
onkeyup	Fires when a key is released
onkeypress	Fires while a key is being pressed (deprecated in favor of keydown)

3. Form Events

Event	Description
onsubmit	Fires when a form is submitted
onchange	Fires when an input's value changes and loses focus
oninput	Fires immediately as an input's value changes
onfocus	Fires when an element gains focus
onblur	Fires when an element loses focus
onreset	Fires when a form is reset
oninvalid	Fires when a form field fails validation

4. Window and Document Events

Event	Description
onload	Fires when the page has fully loaded
onresize	Fires when the browser window is resized
onscroll	Fires when an element or the page is scrolled
onunload	Fires when the user leaves the page
onbeforeunload	Fires just before the page is unloaded, often used for exit prompts

5. Drag and Drop Events

Event	Description
ondragstart	Fires when the user starts dragging an element
ondragover	Fires when a dragged item is over a valid drop target
ondrop	Fires when the dragged item is dropped
ondragend	Fires when the drag operation finishes

6. Clipboard and Touch Events

Event	Description
oncopy	Fires when content is copied
oncut	Fires when content is cut
onpaste	Fires when content is pasted
ontouchstart	Fires when a touch point is placed on a touch surface
ontouchend	Fires when a touch point is removed

Inline vs addEventListener

While inline attributes like onclick="..." work directly in HTML, modern development favors addEventListener() because it keeps JavaScript separate from markup and allows multiple handlers on the same element.

Try It Yourself

Use the live, editable examples below to practice handling different HTML events.

Try it Yourself HTML

<button id='clickBtn'>Click Me</button>
<p id='output'>Waiting for click...</p>
<script>
  document.getElementById('clickBtn').addEventListener('click', function() {
    document.getElementById('output').innerText = 'Button was clicked!';
  });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<input type='text' id='nameInput' placeholder='Type your name'>
<p id='liveOutput'></p>
<script>
  document.getElementById('nameInput').addEventListener('input', function(e) {
    document.getElementById('liveOutput').innerText = 'You typed: ' + e.target.value;
  });
</script>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

document.addEventListener('keydown', function(e) {
  console.log('Key pressed: ' + e.key);
});

Output

Press Run to execute.

Exercise: Build a Live Character CounterHTML

Create a textarea and a paragraph below it. Using the oninput event, update the paragraph in real time to show how many characters the user has typed.

Try it Yourself HTML

<textarea id='msg' placeholder='Start typing...'></textarea>
<p id='count'>0 characters</p>
<script>
  // Add your event listener here
</script>

Output

Press Run to execute.

Show expected output

The character count updates live as the user types in the textarea.

This is a self-check — compare your result with the expected output above.

Was this page helpful?