komagataのブログ

こちらについて、@tricknotesさんからズバリな回答をいただきました。

動的に増える要素へのイベント設定 | komagataのブログ

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

上記のようなHTMLでliが動的に増える場合、イベントのbubblingを利用して親の要素にイベントを設定しておいて下記のように捕まえればいいそうです。

const ul = document.querySelector("ul");
ul.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("FOO↑↑↑");
  }
});

これなら処理速度も安心ですね。

こういうやり方はEvent Delegationって呼ばれてるそうです。

スッキリしました！