Efficient event management: one listener instead of one per button

While working out, I suddenly started thinking about efficient event management and ended up writing some code.

First, I created 100 buttons and added them to bodyDOM.

Then I tried two approaches. The commented-out part at the top adds addEventListener() to every one of the 100 buttons. I thought doing it this way would waste a lot of memory or be less efficient.

So I wondered if I could print only the element of bodyDOM where the click event happened, and came up with the code below.

1
2
3bodyDOM.addEventListener("click", (e) => {
  console.log(e.target.innerText);
});

The idea just popped into my head, so I tried it out. Haha