JavaScriptにおけるイベントハンドラの最適化

要素に設定された過剰な数のイベントハンドラは、 多くのメモリを消費し、ページの動作を遅くします。

例を見てみましょう。 あるリストがあるとします：

html<ul></ul>

このリストへの参照を変数に取得します：

javascriptlet ul = document.querySelector('ul');

次に、クリックイベントハンドラを設定しながら、 リストを li タグで埋めていきます：

javascriptfor (let i = 1; i <= 1000; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  ul.append(li);
  
  li.addEventListener('click', function() {
    console.log(this.textContent);
  });
}

結果として、1000個のハンドラができてしまいます。 これは非常に多すぎます。 最適化するために、 イベントデリゲーションを 利用して、ul タグにハンドラを1つだけ設定することができます。

やってみましょう。まずはリスト項目を作成します：

javascriptfor (let i = 1; i <= 1000; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  ul.append(li);
}

そして、イベントのデリゲーションを実装します：

javascriptul.addEventListener('click', function(event) {
  let li = event.target.closest('li');
  
  if (li) {
    console.log(li.textContent);
  }
});