Events and Forms

List Event Delegation

One click listener on a task list reads the clicked button and updates an accessible status output.

Program

Event delegation keeps one listener on the list instead of attaching a separate listener to every button.

One parent listener can react because the event carries its target.Event delegation pathPinned path for one Done button clicktarget: the clicked button; listener: the parent listdocumenttask listbuttontask liststatusrole=status updates onceOne parent listener can react because the event carries its target.
Figure: A delegated click moves through the event path. Model source: books/javascript-client/02events_forms/list_event_delegation/diagrams/event_path.semantic.json.
list_event_delegation.html
Visuals: captured from real browser rendering
<ul id="tasks">
  <li><button data-task="Pack">Pack</button></li>
  <li><button data-task="Ship">Ship</button></li>
</ul>
<output id="status" role="status">No task selected</output>
<script>
  const tasks = document.querySelector("#tasks");
  const status = document.querySelector("#status");
  tasks.addEventListener("click", event => {
    const button = event.target.closest("button[data-task]");
    if (!button) return;
    status.textContent = button.dataset.task + " selected";
  });
</script>

  1. Create the task list.

    A task list contains Pack and Ship buttons.
    The list is the parent that will receive one click listener.

  2. Add an accessible status output.

    A role status output starts with No task selected.
    The status output gives the click result a visible and announced place.

  3. Find the parent list once.

    JavaScript stores one reference to the task list.
    The parent list is the only element that needs a listener.

  4. Listen for clicks on the list.

    One click listener waits on the task list instead of each button.
    Delegation keeps the listener on the stable parent element.

  5. Find the clicked task button.

    closest finds the task button that received the click.
    closest filters the click to buttons that carry task data.

  6. Render the selected task.

    The status output changes to Pack selected after a task button click.
    The clicked button data becomes the visible status text.
event delegation A parent listener can handle clicks from child controls by inspecting the event target.
status output role="status" gives the result a simple accessible update area.