Study notes · 12% of the exam

DOM and Events

Select elements, listen for events, and use bubbling to handle many elements with one listener.

Key points

  1. 1

    querySelector and querySelectorAll accept any CSS selector.

  2. 2

    Events bubble from the target up through its ancestors, which enables event delegation with event.target.closest(...).

  3. 3

    preventDefault() cancels the browser's default action; stopPropagation() stops bubbling. They are independent.

  4. 4

    DOMContentLoaded fires when the DOM is ready; load waits for images and other resources too.

Common traps

  • The input event fires on every keystroke; change fires when the value is committed.

Test yourself on DOM and Events

Ten questions, with the answer and explanation after each one.