A handler is a function called when something happens. In a to-do interface, typing, pressing Enter, and clicking a button are different events. Register a function for each event so the interface can respond; without listeners, the controls do nothing. section 2.2.3
Start with a button
Register a click listener that calls the action you want: `addTodoButton.addEventListener('click', () => { addTodo() })`. The listener responds to the click; `addTodo()` updates the to-do state and its displayed list. An input listener can separately disable the button when the description is too short. section 2.2.3
A handler need not respond directly to a browser event. A dispatcher can associate a command name with one or more handler functions. `subscribe('remove-todo', handler)` registers a response; `dispatch('remove-todo', index)` calls it with the index. The handler can then call a reducer to update state. Subscription returns a function for removing the handler when it is no longer needed. section 5.1.3
Connect a click to a command
A component’s button listener can dispatch `remove-todo` with the clicked item’s index. The registered command handler receives that index and changes application state. This separates the user interaction from the state-changing function. section 5.2.4 section 5.1.3
When handlers belong to components, account for who owns them:
- For a component method used as a DOM event handler, bind the function to the component instance so `this` refers to that instance. Pass the handler’s arguments through the binding wrapper. section 10.2 section 10.5
- For a child component’s custom event, register the handler supplied by its parent. Bind `this` to the parent—not the child—so the handler can update parent state. section 11.2.1 section 11.2.3
- Save each unsubscribe function when the child mounts, then call it when the child unmounts. section 11.2.3
Server-rendered HTML illustrates why registration matters: the markup can display before it responds to interaction. Hydration connects that HTML to the component’s virtual DOM and attaches event handlers in the browser. section 1.3.3
