イベントデリゲーションの極意　DOM操作をスマートにする全ガイド

イベントデリゲーションの実装例

イベントデリゲーションは、親要素にイベントリスナーを設定し、子要素のイベントを管理する手法です。この手法を使用することで、パフォーマンスやコードの簡素化が可能になり、より効率的な開発が実現できます。

イベントデリゲーションは、複数の子要素が同じイベント処理を持つ場合に非常に便利です。たとえば、リスト内のアイテムをクリックした際に、それに応じた処理を行うとします。通常であれば、各アイテムに個別にイベントリスナーを設置する必要がありますが、イベントデリゲーションを利用すれば、親の要素一つにだけリスナーを設定することができます。これにより、新たなアイテムが追加された場合においても、個別の設定は不要になるのです。

具体的な実装例を見てみましょう。以下は、HTMLのリストと、JavaScriptでのイベントデリゲーションの実装例です。

    
アイテム1
    
アイテム2
    
アイテム3

    document.getElementById('itemList').addEventListener('click', function(event) {
        if (event.target.tagName === 'LI') {
            alert(event.target.textContent + ' がクリックされました！');
        }
    });

このコードでは、ul要素にイベントリスナーを設定し、クリックした要素がliタグであるかを判定しています。これにより、個別のli要素に直接リスナーを設定する手間が省け、管理が楽になります。このように、イベントデリゲーションを活用することで、コードの効率を大幅に向上させることができるのです。