Event Delegation (event.target)

Event delegation is a way to assign listeners to DOM elements. If you have a lot of similar child elements within a parent element. You can assign a listener to the parent and listen to all events from the children by checking event.target to minimize memory usage.

<div id="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>;

const container = document.querySelector("#container");
container.addEventListener(
  "click",
  (event) => (event.target.style.backgroundColor = bgChange())
);

See the real effect in MDN’s example.

References

• Introduction to events - Learn web development | MDN (mozilla.org)
• 請說明瀏覽器中的事件委派、捕獲、冒泡｜ExplainThis