JavaScriptイベント委任

概要: このチュートリアルでは、子要素に複数のイベントハンドラを登録する代わりに、親要素に単一のイベントハンドラを追加するJavaScriptイベント委任の使用方法を学習します。

JavaScriptイベント委任入門

次のようなメニューがあるとします。

<ul id="menu">
    <li><a id="home">home</a></li>
    <li><a id="dashboard">Dashboard</a></li>
    <li><a id="report">report</a></li>
</ul>Code language: HTML, XML (xml)

各メニュー項目のclickイベントを処理するには、対応するclickイベントハンドラを追加します。

let home = document.querySelector('#home');
home.addEventListener('click',(event) => {
    console.log('Home menu item was clicked');
});

let dashboard = document.querySelector('#dashboard');
dashboard.addEventListener('click',(event) => {
    console.log('Dashboard menu item was clicked');
});

let report = document.querySelector('#report');
report.addEventListener('click',(event) => {
    console.log('Report menu item was clicked');
});
Code language: JavaScript (javascript)

JavaScriptでは、ページに多数のイベントハンドラがあると、次の理由により、これらのイベントハンドラがパフォーマンスに直接影響します。

• 第一に、各イベントハンドラは、メモリを占有する関数であり、オブジェクトでもあります。メモリ内のオブジェクトが多いほど、パフォーマンスは低下します。
• 第二に、すべてのイベントハンドラを割り当てるには時間がかかり、ページのインタラクティブ性に遅延が生じます。

この問題を解決するには、イベントバブリングを活用できます。

複数のイベントハンドラを持つ代わりに、すべてのclickイベントを処理する単一のイベントハンドラを割り当てることができます。

let menu = document.querySelector('#menu');

menu.addEventListener('click', (event) => {
    let target = event.target;

    switch(target.id) {
        case 'home':
            console.log('Home menu item was clicked');
            break;
        case 'dashboard':
            console.log('Dashboard menu item was clicked');
            break;
        case 'report':
            console.log('Report menu item was clicked');
            break;
    }
});Code language: JavaScript (javascript)

仕組み

• IDがmenuの<ul>要素内の任意の<a>要素をクリックすると、clickイベントは親要素である<ul>要素にバブルアップします。そのため、個々の<a>要素のclickイベントを処理する代わりに、親要素でclickイベントをキャプチャできます。
• clickイベントリスナーでは、イベントをディスパッチする要素を参照するtargetプロパティにアクセスできます。イベントが発生した要素のidを取得するには、target.idプロパティを使用します。
• clickイベントを発生させた要素のidを取得したら、イベントを対応処理するコードを実行できます。

イベントハンドラが多すぎる問題を処理するこの方法を、イベント委任と呼びます。

イベント委任とは、イベントバブリングを使用して、イベントが発生した要素よりもDOMの上位レベルでイベントを処理する手法のことです。

JavaScriptイベント委任の利点

可能な場合は、documentに単一のイベントハンドラを設定して、特定のタイプのすべてのイベントを処理できます。これにより、次の利点が得られます。

• メモリ使用量の削減、パフォーマンスの向上。
• ページにイベントハンドラを設定するために必要な時間が短縮されます。
• documentオブジェクトはすぐに使用できます。要素がレンダリングされるとすぐに、遅延なく正しく機能し始めます。 DOMContentLoadedイベントまたはloadイベントを待つ必要はありません。

まとめ

• 多数のイベントハンドラがあると、メモリが消費され、ページのパフォーマンスが低下します。
• イベント委任テクニックは、イベントバブリングを利用して、イベントが発生した要素よりもDOMの上位レベルでイベントを処理します。