element.addEventListener('click', handler);
element.removeEventListener('click', handler);

// Event object properties
handler(event) { event.target, event.preventDefault() }

Deep Dive Course

The browser fires **events** for user actions, network requests, timers, and more. **addEventListener** is the standard way to subscribe to events. The **event object** passed to handlers contains details (target, type, coordinates for mouse events, key for keyboard events). Events **bubble** up the DOM tree by default.

1Understanding DOM Events

The browser fires events for user actions, network requests, timers, and more. addEventListener is the standard way to subscribe to events. The event object passed to handlers contains details (target, type, coordinates for mouse events, key for keyboard events). Events bubble up the DOM tree by default.

💡

Always use addEventListener instead of on-properties (onclick) — it allows multiple listeners and is easier to remove.

editor.html

const btn = document.querySelector('#submitBtn');

function handleClick(event) {
  event.preventDefault(); // stop form submit
  console.log('Button clicked by:', event.target.id);
  console.log('Modifier keys:', { shift: event.shiftKey, ctrl: event.ctrlKey });
}

btn.addEventListener('click', handleClick);
// Later: remove it
btn.removeEventListener('click', handleClick);

localhost:3000

2Practical Example

Here is a real-world application of DOM Events showing how it is used in production JavaScript code.

editor.html

// Event bubbling
document.addEventListener('click', (e) => {
  console.log('Document received click from:', e.target.tagName);
});
// Clicking a <button> logs: 'Document received click from: BUTTON'
// because the event bubbles up through the DOM

localhost:3000

3Best Practices

Follow these guidelines when working with DOM Events:

1. Always use addEventListener, not onclick attributes

2. Use removeEventListener with the same function reference to clean up

3. Use event.preventDefault() to stop default browser behavior

⚠️

Tip: Always use addEventListener instead of on-properties (onclick) — it allows multiple listeners and is easier to remove.

editor.html

const btn = document.querySelector('#submitBtn');

function handleClick(event) {
  event.preventDefault(); // stop form submit
  console.log('Button clicked by:', event.target.id);
  console.log('Modifier keys:', { shift: event.shiftKey, ctrl: event.ctrlKey });
}

btn.addEventListener('click', handleClick);
// Later: remove it
btn.removeEventListener('click', handleClick);

localhost:3000

Examples

Example 01Basic Usage

const btn = document.querySelector('#submitBtn');

function handleClick(event) {
  event.preventDefault(); // stop form submit
  console.log('Button clicked by:', event.target.id);
  console.log('Modifier keys:', { shift: event.shiftKey, ctrl: event.ctrlKey });
}

btn.addEventListener('click', handleClick);
// Later: remove it
btn.removeEventListener('click', handleClick);

Example 02Advanced Example

// Event bubbling
document.addEventListener('click', (e) => {
  console.log('Document received click from:', e.target.tagName);
});
// Clicking a <button> logs: 'Document received click from: BUTTON'
// because the event bubbles up through the DOM

Best Practices

Always use addEventListener, not onclick attributes
Use removeEventListener with the same function reference to clean up
Use event.preventDefault() to stop default browser behavior

Interview Question

What is the difference between event.stopPropagation() and event.preventDefault()?▼

Hint: One stops the event from traveling; the other stops the default action.

stopPropagation() stops the event from bubbling up (or capturing down) to parent elements. preventDefault() cancels the browser's default behavior for that event (e.g., stops form submission, prevents link navigation). You can use both together if needed.

Exercises

MediumPractice using DOM Events in a real scenario.

View Solution

const btn = document.querySelector('#submitBtn');

function handleClick(event) {
  event.preventDefault(); // stop form submit
  console.log('Button clicked by:', event.target.id);
  console.log('Modifier keys:', { shift: event.shiftKey, ctrl: event.ctrlKey });
}

btn.addEventListener('click', handleClick);
// Later: remove it
btn.removeEventListener('click', handleClick);

Frequently Asked Questions

What is the difference between event.stopPropagation() and event.preventDefault()?▼

Related Functions

Event-ListenersSelection-MethodsWhat-is-DOM