JavaScriptにおけるイベントデリゲーション

前のレッスンでは、新しい要素を追加する際に発生する問題とその解決策が説明されました。このレッスンでは、その問題を回避するより優れた方法 - イベントデリゲーション - について検討します。詳しく見ていきましょう。

ご存知の通り、liをクリックすると、同時にulもクリックすることになります。これはイベントのバブリングによって可能になります。この特性を利用して、各liに個別にイベントを設定する代わりに、その親要素であるulにイベントを設定することで、課題を解決できます：

list.addEventListener('click', function() {
	
});

これで、イベントハンドラ内のthisはハンドラがバインドされている要素を指し、 event.targetはイベントが発生した要素を指すようになります：

list.addEventListener('click', function(event) {
	console.log(this);         // リスト
	console.log(event.target); // リスト項目
});

クリックされたliの末尾に感嘆符を追加するようにしてみましょう：

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

上記の解決策を繰り返し試してください。新しいliもクリックに反応することを確認してください。