What is an event delegation

Event delegation is a technique where you attach one event listener to a parent element instead of adding listeners to each child element. It works because events bubble up from the target element to its parents.

For example, if you wanted to detect field changes inside a specific form, you can use event delegation technique,

  var form = document.querySelector("#registration-form");

  // Listen for changes to fields inside the form
  form.addEventListener(
    "input",
    function (event) {
      // Log the field that was changed
      console.log(event.target);
    },
    false
  );