JavaScript イベント委任の詳細な紹介 (コード付き)

この記事では、JavaScript イベント委任 (コード付き) について詳しく説明します。これには一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。

イベント委任 (イベント プロキシとも呼ばれます) は、イベント バブリングを使用して、イベント ハンドラーを 1 つだけ指定することで、特定の種類のすべてのイベントを管理します。

インターネット上のイベント委任に関する「速達の受け取り」の非常に鮮明な例があります。ここでは、それにいくつかの修正と拡張を加え、プログラムを使用してイベント委任のメカニズムを説明します。

ある会社には従業員が 3 人いて、速達の配達先住所は会社です。速達が配達されるたびに、配達員がその社員の電話番号に電話して通知し、荷物を受け取ったら受け取りに行きます。呼び出し。

#従業員 ID従業員名連絡先情報# #A#A111111BB222222C三333333 はページに対応します。つまり、各従業員はタグです:

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

各従業員が電話に応答します。速達を受け取る行為はイベントです。ここでは、速達を受け取る行為が onclick イベントに対応すると仮定します:

A.onclik = function() {
    收取快递；
};
B.onclick = function() {
    收取快递；
};
C.onclick = function() {
    收取快递；
};

上記の実装には、通常、各従業員をループし、イベントを追加することが含まれます。それ:

/*程序1*/
var aUl = document.getElemengtByID("前台工作人员");
var aLi = aUl.getElemengtsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
    aLi[i].onclick = function() {
        收取快递;
    }
}

従業員ごとにイベントを設定すると、冗長なコードが生成され、メモリが占​​有され、複数の DOM 操作 (DOM ノードとの対話) が実行され、ページの実行パフォーマンスに影響を与えることがわかります。

「DOM オペレーションの削減は、パフォーマンス最適化の主要なアイデアの 1 つです。」

そこで、私たちは自然にこう考えました。なぜフロント デスクのスタッフに速達のサインをさせられないのでしょう?

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

/*程序2*/
var tel = document.getElementById("前台工作人员");
tel.onclick = function() {
    收取快递;
}

宅配業者が従業員 A に荷物を受け取るために電話をかけたとします (

onclick

) が、従業員 A の DOM ノード

には対応するイベント (

onclick )、このイベントは

の親要素

に「バブル」され、
に onclick 処理イベントがあることがわかり、イベントは次のようになります。トリガーされ、フロントデスクのスタッフが速達を受け取ります。 このようにして、コードの量が削減されるだけでなく、DOM ノードとの対話の数も削減されることがわかります。 もう 1 つの利点: 新しい DOM ノードを追加すると、親要素のイベント効果が自動的に引き継がれます。つまり、新入社員の丁さんが会社に来たら、専用のイベントを用意することなく、フロントスタッフが直接、速達の集荷を手伝うということだ。
たとえば、新入社員 Ding が会社に来たとき:

...
<input type="button" id="btn" value="添加新员工">
...

...
/*程序3*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    var aLi = document.createElement("li");
    oLi.innerHTML = "员工丁";
    aUl.appendChild(aLi);
}
...

イベント委任を使用しないプログラムでは、新しく追加された従業員 Ding のためのイベントはありません。プログラム 1:

/*程序4*/
function pro1() {
    var aUl = document.getElemengtByID("前台工作人员");
    var aLi = aUl.getElemengtsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onclick = function() {
            收取快递;
        }
    }
}

次に、新しい従業員 D を追加するプログラムの最後にこの関数を実行します:

/*程序5*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    ...
    pro1();
}

これの欠点は明らかです。 DOM ノードのインタラクションは指数関数的に増加します。

これをイベント委任機構を使用して実装すると、この問題は発生せず、子要素ノードの onclick イベントが親要素ノードで直接実行されます。

この時点で、同じ種類のイベントの場合、イベント委任を使用して親要素ノードに配置すると非常に便利であると考えます。しかし、異なる子要素ノードに対して異なるイベントを実行したい場合でも、イベント委任を使用できますか?


答えは「はい」です。
たとえば、上記の 3 人の従業員は、常に固定ブランドの速達便を使用しています。

従業員 A は、価格が安いため STO Express を使用することを好み、STO は公園にのみ配達します。ゲート;

従業員 B は JD.com の会員で、常に JD.com の自社運営製品を購入しており、JD.com は速達便で階下に商品を配達します;
• 従業員 C は SF Express ですVIP、SF Express は、VIP がいるフロアのロビーまで配達します。
• 3人が電話を受けた後、フロントスタッフは荷物を取りに別の場所に行く必要がある イベントデリゲーションを使用しないプログラムの場合、独自の処理イベントを設定する必要がある各人用:

var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");

A.onclick = function() {
    去园区大门取快递；
}
B.onclick = function() {
    去楼下取快递；
}
C.onclick = function() {
    去本层大厅取快递；
}

には少なくとも 3 つの DOM 操作が必要で、イベント関数は対応するノードごとに設定されます。
イベント委任を使用する場合:

var aUl = document.getElemengtByID("前台工作人员");
aUl.onclick = function (ev) {
    var target = ev || window.event; /*兼容浏览器*/
    var target = ev.target || ev.srcElement; /*兼容浏览器*/
    if (target.nodeName.toLocaleLowerCase() == "li") {
        switch(target.id) {
            case "A" :
                去园区大门取快递;
                break;
            case "B" :
                去楼下取快递;
                break;
            case "C" :
                去本层大厅取快递;
                break;
        }
    }
}

この方法では、DOM 操作が 1 つだけあり、他の操作は JS で実行されるため、Web ページのパフォーマンスを効果的に向上させることができます。
上記は JS イベントデリゲーションの基本的な考え方です。つまり、イベント バブリングの機能は、イベントの管理、冗長コードの削減、不必要な作成の削減、対話型操作の削減を目的として使用され、メモリを節約し、パフォーマンスを向上させます。
イベント バブリング
イベント バブリングは、DOM 要素ノードがトリガーされるときです。ノードに対応するイベントがない場合は、その親要素に対応するイベントがあるかどうかを確認します。ある場合は、 を実行します。そうでない場合は、上向きにチェックを続けます。これに対応するのがイベントキャプチャ
#です

以上がJavaScript イベント委任の詳細な紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。