MEPX
Chapter 14 of 16All chapters
  1. 1Introduction
  2. 2Syntax and statements
  3. 3Variables and scope
  4. 4Data types
  5. 5Comparison and coercion
  6. 6Strings
  7. 7Numbers and maths
  8. 8Arrays
  9. 9Objects
  10. 10Functions
  11. 11Conditions and loops
  12. 12Classes
  13. 13The DOM
  14. 14Events
  15. 15Promises and async
  16. 16Modules

Chapter 14 of 16

Events

Listening for what the visitor does.

Listeners

addEventListener attaches a function to an event on an element. The same element can have many listeners, and removeEventListener needs the same function reference to detach one.

  • The event object carries target, key, coordinates and preventDefault.
  • Events bubble up the tree, so a listener on a container can serve every child.

Delegation

Listening on a parent and checking event.target.closest is called delegation. It survives content being replaced, which is why it suits anything rendered dynamically.