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

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

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

<ul></ul>

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

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

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

for (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つだけ設定することができます。

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

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

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

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

100 × 100 サイズのHTMLテーブルを作成してください。各セルがクリックされると赤色に変わるようにしてください。