JavaScript イベント委任の原則

1. イベント委任とは何ですか?

イベント委任はイベント プロキシとも呼ばれます。イベントバブリングを使用して、子要素のすべてのイベントを親要素にバインドします。子要素がイベントのバブルを妨げる場合、委任は実現できません。

以下に簡単な例を示します。

たとえば、宅配業者が 100 人の学生に 100 個の荷物を配達する場合、荷物を 1 つずつ配達するには長い時間がかかります。同時に、各生徒がそれを受け取るために列に並ぶ必要があり、時間がかかります。どのようにすればよいでしょうか?この時点で、宅配業者は 100 個の速達小包をクラスの先生に託すことができ、先生はそれを事務室に置き、生徒は授業後に受け取ることができます。この方法により、宅配業者は時間を節約でき、学生にとっても荷物を受け取るのがより便利になります。このプロセスは委任イベントです。

2. イベント委任の原則

各子ノードに個別イベント リスナーを設定する代わりに、イベント リスナーを親ノードに設定し、バブリング原理を使用して各子ノードの設定に影響を与えます。

具体的なプログラムでどのように実装されているか見てみましょう。
たとえば、現在 5 つの li を含む順序なしリストがあります。各 li にクリック イベントを追加する必要があります。この時点での通常の操作は、ループを通じて各 li にクリック イベントを追加することです。

コードは次のようになります。

<本文>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
    <スクリプト>
        var li = document.querySelectorAll('li');
        for(var i=0;i<li.length;i++){
            li[i].onclick = 関数(){
                this.style.color = '緑';
            }
        }
    </スクリプト>
</本文>

実行結果は次のとおりです。

この方法は確かにクリック操作を実現できますが、このプロセスではクリック イベントを毎回 li に追加する必要があるため、DOM アクセスが多すぎて、ページ全体のインタラクション準備時間が長くなります。

したがって、ここではイベント委任を使用できます。つまり、ul のクリック イベントを登録し、イベント オブジェクトのターゲットを使用して、現在クリックされている li を検索します。li がクリックされると、イベントが ul にバブルされ、ul に登録されたイベントがある場合は、イベント リスナーがトリガーされます。

実装コードは次のとおりです。

<スクリプト>
        var ul = document.querySelector('ul');
        ul.addEventListener('クリック',function(e){
            e.target.style.color = 'オレンジ';
        })
    </スクリプト>

実行結果は次のとおりです。

正常に表示されました。

3. イベント委託の役割

上記の操作により、イベント委任では DOM を 1 回だけ操作するため、プログラムのパフォーマンスが大幅に向上します。

JavaScript イベント委任の原則に関するこの記事はこれで終わりです。JavaScript イベント委任に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後とも 123WORDPRESS.COM を応援していただければ幸いです。