DOM Event delegation pattern

#javascript #html #dom

If you have multiple button element with a similar callback function inside a div element, you can delegate event listeners to the parent div element instead of listening to each button.

// poor practice

<div>
  <button onclick="myFunction("red")">Red</button>
  <button onclick="myFunction("blue")">Blue</button>
  <button onclick="myFunction("black")">Black</button>
</div>

// good practice

<div onclick="myFunction(event)">
  <button id="red">Red</button>
  <button id="blue">Blue</button>
  <button id="black">Black</button>
</div>

// script

function myFunction(event) {
  let target = event.target;
  if (target.nodeName.toLowerCase() !== "button") {
    return;
  }

  // do something with id
  ...
}

The drawback is that you have to write a bit more code to filter out unnecessary events, but it will drastically increase the performance and provide cleaner code which outweighs the drawback significantly.