JavaScript Events - Exercise 2

By default, an event moves from the target element up through its ancestors. This is called bubbling. The example shows the same rule with a small handler that can run in the browser.

parent.addEventListener('click', () => console.log('parent'));
child.addEventListener('click', () => console.log('child'));
// Clicking child logs child, then parent

Call stopPropagation() on the event when the child should not notify its ancestors. Keep the handler focused on the event and use the event object when you need more details.

child.addEventListener('click', (event) => {
  event.stopPropagation();
});

Use event delegation: listen on the stable parent and find the clicked item with closest(). Keep the handler focused on the event and use the event object when you need more details.

list.addEventListener('click', (event) => {
  const item = event.target.closest('li');
  if (item) item.classList.toggle('selected');
});

event.target is where the event started; event.currentTarget is the element whose listener is running. Keep the handler focused on the event and use the event object when you need more details.

list.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
});

Use preventDefault() inside the link handler to cancel its browser default action. Keep the handler focused on the event and use the event object when you need more details.

link.addEventListener('click', (event) => {
  event.preventDefault();
  showPreview();
});

Pass an options object with once: true. The browser removes the listener after its first invocation. The example shows the same rule with a small handler that can run in the browser.

button.addEventListener('click', showWelcome, { once: true });

Set capture: true to run the listener while the event travels down to its target. Keep the handler focused on the event and use the event object when you need more details.

parent.addEventListener('click', handleClick, { capture: true });

Delegate from the list, guard against non-checkbox targets, then use checked to update state. Keep the handler focused on the event and use the event object when you need more details.

settings.addEventListener('change', (event) => {
  if (event.target.matches('input[type="checkbox"]')) {
    saveSetting(event.target.name, event.target.checked);
  }
});

Event delegation attaches one listener to a stable ancestor and uses the event target to handle matching descendants. It works well for lists whose items can change.

list.addEventListener('click', (event) => {
  const item = event.target.closest('li');
  if (item) selectItem(item);
});

Call preventDefault() when you intentionally cancel the browser's built-in action, such as navigation or form submission. It does not stop other listeners from receiving the event.

form.addEventListener('submit', (event) => {
  event.preventDefault();
  saveForm();
});