🔔 DOM Event Model and Types

What Are DOM Events?

So far you've learned to read and change the DOM. Events are what make a page come alive: they are the mechanism that lets your code run in response to something happening — a user clicks a button, a form is submitted, an image finishes loading, the network drops. Without events, a web page would be a static poster; with them, it's an application.

💡 A useful analogy — the doorbell. The button by the door is an element. Pressing it is the event (a "click"). The wiring that carries the signal is the event listener. The chime that plays is your handler function. You can wire different bells to different doors — just as you attach different listeners to different elements — and the house only reacts when a bell is actually rung.

The Event Model & Registration

Modern browsers follow the DOM Level 3 Events specification. A handful of terms describe the whole system:

Three ways to register — and the one you should use

There are three historical ways to attach a handler. Only the first is recommended for real work.

1. addEventListener() — the modern standard

const button = document.getElementById('submit-button');

button.addEventListener('click', (event) => {
  console.log('Button was clicked!');
  console.log('The event object:', event);
});

2. On-event property — one handler only

const input = document.getElementById('username');

// Assigning again REPLACES this handler — you can only have one.
input.onchange = (event) => {
  console.log('Value changed to:', event.target.value);
};

3. Inline HTML attribute — avoid this

<!-- Mixes behavior into markup; hard to maintain and a security risk. -->
<button onclick="handleClick()">Click Me</button>

The Event Object

When an event fires, the browser builds an event object and passes it as the first argument to your handler. It is your window into what happened and where.

document.getElementById('my-button').addEventListener('click', (event) => {
  console.log(event.type);          // "click"
  console.log(event.target);        // the element that was actually clicked
  console.log(event.currentTarget); // the element the listener is attached to
  console.log(event.timeStamp);     // ms since the page loaded
  console.log(event.clientX, event.clientY); // pointer position in the viewport

  event.preventDefault();  // cancel the browser's default action
  event.stopPropagation(); // stop the event travelling to ancestors
});

Type-specific properties

Different events carry different extra data. A mouse event knows where the pointer is; a keyboard event knows which key was pressed.

// Mouse events — position & buttons
canvas.addEventListener('mousemove', (event) => {
  console.log('viewport:', event.clientX, event.clientY);
  console.log('page:', event.pageX, event.pageY);
  console.log('within target:', event.offsetX, event.offsetY);
  console.log('modifiers:', event.ctrlKey, event.shiftKey, event.altKey);
});

// Keyboard events — which key
input.addEventListener('keydown', (event) => {
  console.log('key:', event.key);   // e.g. "a", "Enter", "ArrowUp"
  console.log('code:', event.code); // physical key, e.g. "KeyA"
  if (event.key === '@') event.preventDefault(); // block a character
});

The Families of Events

There are hundreds of event types, but they cluster into a few families. You don't need to memorize them — recognize the families and look up specifics on MDN as you need them.

Mouse events

Note a subtle but important pair: mouseenter/mouseleave fire only for the element itself and do not bubble, while mouseover/mouseout also fire as the pointer crosses child elements and do bubble.

const trigger = document.getElementById('info-icon');
const tooltip = document.getElementById('tooltip');

trigger.addEventListener('mouseenter', () => {
  const rect = trigger.getBoundingClientRect();
  tooltip.style.left = `${rect.right + 10}px`;
  tooltip.style.top = `${rect.top}px`;
  tooltip.classList.add('visible');
});

trigger.addEventListener('mouseleave', () => {
  tooltip.classList.remove('visible');
});

Keyboard events

document.addEventListener('keydown', (event) => {
  // Ctrl+S / Cmd+S to save
  if ((event.ctrlKey || event.metaKey) && event.key === 's') {
    event.preventDefault(); // stop the browser's Save dialog
    saveDocument();
  }
  // Escape to close a modal
  if (event.key === 'Escape') closeModal();
});

Form events

input fires on every keystroke; change fires only when the field loses focus after a change. Reach for input when you want live feedback.

const textarea = document.getElementById('message');
const counter = document.getElementById('char-counter');
const max = Number(textarea.getAttribute('maxlength'));

textarea.addEventListener('input', () => {
  const remaining = max - textarea.value.length;
  counter.textContent = `${remaining} characters remaining`;
  counter.classList.toggle('warning', remaining < 20);
});

Window & document events

// Run setup as soon as the HTML is parsed (before images finish loading)
document.addEventListener('DOMContentLoaded', () => initApp());

// Everything, including images, is loaded
window.addEventListener('load', () => {
  document.getElementById('loading-screen').style.display = 'none';
});

// Network status
window.addEventListener('online',  () => setStatus('Online'));
window.addEventListener('offline', () => setStatus('Offline'));

Custom Events

Beyond the built-in events, you can invent your own with CustomEvent and dispatch them on any element. This lets one part of your app announce "something meaningful happened" without knowing who is listening — a clean way to decouple components.

// 1. Create an event carrying application-specific data in `detail`
const productAdded = new CustomEvent('product:added', {
  detail: { id: 12345, name: 'Wireless Headphones', price: 79.99, qty: 1 },
  bubbles: true,     // allow it to bubble up the tree
  cancelable: true   // allow listeners to preventDefault()
});

// 2. Dispatch it
document.getElementById('shopping-cart').dispatchEvent(productAdded);

// 3. Listen for it anywhere it bubbles to
document.addEventListener('product:added', (event) => {
  const { name, price, qty } = event.detail;
  console.log(`Added ${qty} × ${name}`);
  updateCartTotal(price * qty);
});

Hands-on: Keyboard Inspector

<input id="probe" placeholder="Click here, then type…" />
<pre id="readout">Waiting for a key…</pre>

const probe = document.getElementById('probe');
const readout = document.getElementById('readout');

probe.addEventListener('keydown', (event) => {
  const mods = ['ctrlKey', 'shiftKey', 'altKey', 'metaKey']
    .filter((m) => event[m])
    .map((m) => m.replace('Key', ''));

  let text =
    `key:  ${event.key}\n` +
    `code: ${event.code}\n` +
    `mods: ${mods.length ? mods.join(' + ') : 'none'}`;

  if (event.key === 'Enter') {
    event.preventDefault();
    text += '\n(submit blocked)';
  }
  readout.textContent = text;
});

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Event interface
• MDN — addEventListener()
• javascript.info — Introduction to browser events
• MDN — Event reference (all event types)

🚀 What's Next?

You now know what events are and which ones exist. Next we go deeper into the handlers themselves — the this context, the options object, one-time listeners, and how to remove listeners cleanly to avoid memory leaks.