Responding to what people do.
WHAT AN EVENT IS
Something happening: a click, a key press, a form submission, content loading.
HOW TO RESPOND
Attach a listener to an element, for a named event.
WHAT EVENT PROPAGATION IS
An event moving down to the target, then back up through its ancestors.
WHY THAT MATTERS
A listener on a container receives events from its children.
WHAT DELEGATION IS
Listening on a container, and identifying which child caused the event.
WHY IT IS USEFUL
It handles elements added later, and uses one listener rather than many.
WHAT TO BE CAREFUL WITH
Preventing default behaviour without a reason Stopping propagation, which can break other handlers Attaching listeners repeatedly without removing them
WHY THAT LAST ONE
It causes handlers running several times, and prevents memory being released.
WHAT TO HANDLE BEYOND CLICKS
Keyboard events, so interaction does not require a pointer.
WHY
An element responding only to clicks is unusable by keyboard.
WHAT TO USE FOR INTERACTIVE ELEMENTS
Native elements: buttons, links, inputs.
WHY
They handle keyboard, focus and assistive technology already.