The Event Object

When an event occurs, the browser creates an event object containing information about the event. This object is passed to your event handler as the first argument.

Basic Event Properties

button.addEventListener("click", (event) => {
  console.log(event.type);  // 'click'
  console.log(event.target);  // The element that was clicked
  console.log(event.currentTarget);  // The element with the listener
});

target vs currentTarget

The target is the element where the event originated. The currentTarget is the element the listener is attached to:

// HTML: <div id="parent"><button>Click me</button></div>

const parent = document.querySelector("#parent");
parent.addEventListener("click", (event) => {
  console.log(event.target);  // The button (where click originated)
  console.log(event.currentTarget);  // The div (where listener is attached)
});

Mouse Event Properties

document.addEventListener("click", (event) => {
  // Position relative to viewport
  console.log(event.clientX, event.clientY);

  // Position relative to document
  console.log(event.pageX, event.pageY);

  // Which button was pressed (0=left, 1=middle, 2=right)
  console.log(event.button);

  // Modifier keys held during click
  console.log(event.shiftKey, event.ctrlKey, event.altKey, event.metaKey);
});

Keyboard Event Properties

document.addEventListener("keydown", (event) => {
  console.log(event.key);  // The character ('a', 'Enter', 'ArrowUp')
  console.log(event.code);  // Physical key ('KeyA', 'Enter', 'ArrowUp')

  // Modifier keys
  console.log(event.shiftKey, event.ctrlKey, event.altKey, event.metaKey);

  // Is this a repeat from holding the key?
  console.log(event.repeat);
});

Keep in mind the difference between key and code:

• key represents the character produced (affected by keyboard layout)
• code represents the physical key pressed (consistent across layouts)

// On a QWERTY keyboard, pressing 'A':
// event.key = 'a' (or 'A' with Shift)
// event.code = 'KeyA'

Preventing Default Behavior

Many events have default browser behaviors. Use preventDefault() to stop them:

// Prevent form submission
form.addEventListener("submit", (event) => {
  event.preventDefault();
  // Handle submission with JavaScript instead
});

// Prevent link navigation
link.addEventListener("click", (event) => {
  event.preventDefault();
  // Handle navigation with JavaScript
});

// Prevent context menu
element.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  // Show custom context menu
});

Common Event Handling Patterns

Handling Specific Keys

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    closeModal();
  }

  // Keyboard shortcuts
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault();
    saveDocument();
  }
});

Getting Form Input Values

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const formData = new FormData(event.target);
  const email = formData.get("email");
  const password = formData.get("password");

  // Or access inputs directly
  const emailInput = event.target.querySelector("#email");
  console.log(emailInput.value);
});

Tracking Mouse Position

document.addEventListener("mousemove", (event) => {
  tooltip.style.left = event.clientX + 10 + "px";
  tooltip.style.top = event.clientY + 10 + "px";
});

The input Event for Real-Time Updates

The input event fires immediately when a form control’s value changes:

const searchInput = document.querySelector("#search");

searchInput.addEventListener("input", (event) => {
  const query = event.target.value;
  filterResults(query);
});

The change event only fires when the input loses focus, so input lets you react sooner.