webpackerのお陰で最近jsを書いてるんですが、初歩的なところで悩んでいます。

動的に増える要素へのイベント設定をjQueryを使わずに書きたい。

// jQuery版
$(".foo").on("click", () => {
  console.log("FOO↑↑↑");
})
// ES6版
const elements = document.querySelectorAll(".foo");
Array.from(elements, (element) => {
  element.addEventListener("click", () => {
    console.log("FOO↑↑↑");
  })
})

.fooなDOMがのちほどAjaxなどで動的に増えた時、jQuery版は動くけど、ES6版だと動かないじゃない?

下記のように書くというのをどこかで見たんですが、div全部取ってくるなんて遅そうで怖い。

const elements = document.getElementsByTagName("div");
Array.from(elements, (element) => {
  if (element.classList.contains(".foo")) {
    element.addEventListener("click", () => {
      console.log("FOO↑↑↑");
    })
  }
});

どう書くのが普通なんでしょう?

回答編:Event Delegationで動的に増える要素に対応する | komagataのブログ

Comments


(Option)