JavaScript イベント委任 (プロキシ) の使用例の詳細

導入

例示する

この記事では、JavaScript でのイベントの委任 (delegate) の使用方法を例を使って紹介します。

イベント委任の概要

イベント委任 (イベントプロキシとも呼ばれる) は、JavaScript でイベントをバインドするための一般的な手法です。これは、本来は子要素にバインドする必要がある応答イベントを親要素または外部要素に委任し、外部要素がイベント監視の責任を引き受けられるようにすることです。

イベント委任の原則は、DOM 要素のイベントバブリングです。

イベント委任の利点

1. メモリを節約し、イベントバインディングを減らす

元々、イベントはすべての子要素にバインドする必要がありましたが、イベント委任を使用した後は、必要なイベントバインディングは 1 つだけになります。

2. イベントは動的にバインドでき、新しく追加されたサブオブジェクトイベントはバインドされたイベントによって処理できます。

新しく追加された子オブジェクトによって生成されたイベントは、最終的に親要素にバブルアップされ、処理できるようになるため、

例: イベントの委任

要件: リスト要素をクリックするとコンテンツがポップアップ表示されるリスト。

記述方法1: イベント委譲

イベントを外側の要素にバインドするだけです。

 <!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
 
<ul id="id-ul">
    <li>私は最初のliです</li>
    <li>私は2番目のliです</li>
    <li>私は3番目のliです</li>
</ul>
 
<スクリプト>
    ul = document.getElementById('id-ul'); とします。
    ul.addEventListener("クリック", 関数(ev) {
        アラート(ev.target.innerText);
    })
</スクリプト>
 
</本文>
</html>

結果

記述方法2: 各子要素はイベントにバインドされます

各子要素にはイベントがバインドされています。

 <!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
 
<ul id="id-ul">
    <li>私は最初のliです</li>
    <li>私は2番目のliです</li>
    <li>私は3番目のliです</li>
</ul>
 
<スクリプト>
    li = document.querySelectorAll('#id-ul li') とします。
    for (let liElement of li) {
        liElement.addEventListener("クリック", 関数(ev) {
            アラート(ev.target.innerText);
        });
    }
</スクリプト>
 
</本文>
</html>

結果

例: 新しい要素を追加する

要件: 「生成ボタン」をクリックするたびに、サブリスト要素が生成されます。その後、リスト要素をクリックするたびに、その内容がポップアップ表示されます。

記述方法1: イベント委譲

<!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
 
<ul id="id-ul">
    <li>1</li>
    <li>2</li>
</ul>
<button id="btn">クリック</button>
<スクリプト>
    num = 3 とします。
    eUl = document.querySelector("#id-ul");
    eButton を document.querySelector("#btn") とします。
 
    eButton.addEventListener("クリック", 関数() {
        newLi = document.createElement("li");
        eUl.appendChild(newLi);
        新しいLi.innerText = num++;
    })
    eUl.addEventListener("クリック",関数(イベント) {
        アラート(event.target.innerText);
    })
</スクリプト>
 
</本文>
</html>

結果

ご覧のとおり、既存の要素と新しく作成された要素の両方のイベントが処理されます。

記述方法2: 各子要素はイベントにバインドされます

<!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
 
<ul id="id-ul">
    <li>1</li>
    <li>2</li>
</ul>
<button id="btn">クリック</button>
<スクリプト>
    num = 3 とします。
    eUl = document.querySelector("#id-ul");
    eButton を document.querySelector("#btn") とします。
    eLi = document.querySelectorAll("#id-ul li");
 
    eButton.addEventListener("クリック", 関数() {
        newLi = document.createElement("li");
        eUl.appendChild(newLi);
        新しいLi.innerText = num++;
    })
 
    (eLiのeLi要素とする) {
        eLiElement.addEventListener("クリック",関数(イベント) {
            アラート(event.target.innerText);
        })
    }
 
</スクリプト>
 
</本文>
</html>

結果

元の要素のクリックイベントは処理されますが、新しく追加された要素は処理されないことがわかります。

これで、JavaScript イベント委譲の詳細な使用例に関するこの記事は終了です。JavaScript イベント委譲に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: