Events and Delegation | JavaScript Lesson

Lesson content

Read, practise, then check your understanding

Events travel through capture, target, and bubble phases. target is the origin; currentTarget is the listener owner.

Delegated handling

const list = document.querySelector("[data-lessons]");
list.addEventListener("click", event => {
  const button = event.target.closest("button[data-chapter]");
  if (!button || !list.contains(button)) return;
  openChapter(button.dataset.chapter);
});

Delegation handles dynamic descendants with one listener. preventDefault cancels a cancelable host action; stopPropagation blocks propagation and should be rare. Remove long-lived listeners or use { once: true } and AbortSignal. Prefer semantic click/change/input/submit behavior over device-specific assumptions and keep handlers fast.

Knowledge check

Answer every question correctly to complete this chapter.

Which statement best describes event target?

Which JavaScript term matches this description: The original object on which an event occurred.

Which statement best describes currentTarget?

Which JavaScript term matches this description: The object whose listener is currently running.

Which statement best describes bubbling?

Which JavaScript term matches this description: Propagation from a target upward through ancestors.

Which statement best describes event delegation?

Which JavaScript term matches this description: Handling descendant events from a shared ancestor listener.

Which statement best describes preventDefault?

Which JavaScript term matches this description: Cancellation of a cancelable event's host default action.

0 of 10 checks passed

Your progress is saved on this device.