The Event Object | HAP's Learning Lab

← Back to Station 2: What Just Happened?

Key Properties at a Glance

🎯

event.target

The element the user actually interacted with. A live DOM element — all DOM properties are available on it. The most-used property in everyday event handling.

📌

event.currentTarget

The element the listener is attached to. When the listener is on a parent container and the user clicks a child, currentTarget is always the parent. Equal to target only when the clicked element is also the listener's element.

🏷️

event.type

A string: "click", "submit", "keydown", etc. Useful in shared handlers that respond to multiple event types.

🛑

event.preventDefault()

A method (not a property). Stops the browser's built-in behavior for this event: form reload, link navigation, etc. Call it as the first line of the handler.

Reading Data from event.target

event.target is a full DOM element. Every property available via document.querySelector is also available here.

Common event.target properties:

// event.target is a live DOM element — use DOM properties on it
element.addEventListener('click', function(event) {
  event.target.textContent  // The visible text of the clicked element
  event.target.id           // The element's id attribute
  event.target.className    // The element's class attribute (as a string)
  event.target.dataset      // An object of all data-* attributes
  event.target.tagName      // "BUTTON", "DIV", "A", etc. (always uppercase)
});

// Example: read a data attribute
// <button data-robot-id="r7">Unit R-7</button>
element.addEventListener('click', function(event) {
  const robotId = event.target.dataset.robotId; // "r7"
  console.log(robotId);
});

target vs. currentTarget

When they differ:

// target  = where the event originated (the clicked element)
// currentTarget = where the listener is attached

const container = document.querySelector('.card-list');

container.addEventListener('click', function(event) {
  console.log(event.target);        // <span> or <h2> inside a card
  console.log(event.currentTarget); // .card-list (always the container)
});

// When the listener and the click are on the same element, they are equal:
const btn = document.querySelector('#my-btn');
btn.addEventListener('click', function(event) {
  console.log(event.target === event.currentTarget); // true
});

Property Access Syntax

Event properties inside a callback:

// Access event properties inside any callback
element.addEventListener('click', function(event) {
  event.target         // The element that was clicked (DOM element)
  event.currentTarget  // The element the listener is attached to
  event.type           // "click", "submit", "keydown", etc.
  event.timeStamp      // Milliseconds since page load when event fired
});

preventDefault

Stopping default browser behavior:

// event.preventDefault() — stop the browser's default behavior
// Common uses:

// 1. Stop a form from reloading the page
form.addEventListener('submit', function(event) {
  event.preventDefault();
  // Now handle the data yourself
});

// 2. Stop a link from navigating
link.addEventListener('click', function(event) {
  event.preventDefault();
  // Handle routing yourself
});

// Note: call it FIRST, before any other logic in the handler

The Log-First Pattern

When I encounter an unfamiliar event or element, I log before I extract. This prevents guessing at property names.

Explore before you extract:

// Exploratory pattern: log first, then extract
element.addEventListener('click', function(event) {
  console.log(event);              // See everything available
  console.log(event.target);      // See the element
  console.log(event.type);        // Confirm the event type

  // Once you know what's there, extract what you need:
  const id = event.target.dataset.id;
  const label = event.target.textContent;
});

← Back to Station 2: What Just Happened?