ホームページ > 記事 > ウェブフロントエンド > JavaScript イベント委任の詳細な紹介 (コード付き)
この記事では、JavaScript イベント委任 (コード付き) について詳しく説明します。これには一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。
イベント委任 (イベント プロキシとも呼ばれます) は、イベント バブリングを使用して、イベント ハンドラーを 1 つだけ指定することで、特定の種類のすべてのイベントを管理します。
インターネット上のイベント委任に関する「速達の受け取り」の非常に鮮明な例があります。ここでは、それにいくつかの修正と拡張を加え、プログラムを使用してイベント委任のメカニズムを説明します。
ある会社には従業員が 3 人いて、速達の配達先住所は会社です。速達が配達されるたびに、配達員がその社員の電話番号に電話して通知し、荷物を受け取ったら受け取りに行きます。呼び出し。
従業員名 | 連絡先情報 | |
---|---|---|
111111 | B | |
222222 | C | |
333333 | はページに対応します。つまり、各従業員はタグです: |
/*程序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 イベントが親要素ノードで直接実行されます。 この時点で、同じ種類のイベントの場合、イベント委任を使用して親要素ノードに配置すると非常に便利であると考えます。しかし、異なる子要素ノードに対して異なるイベントを実行したい場合でも、イベント委任を使用できますか? 従業員 A は、価格が安いため STO Express を使用することを好み、STO は公園にのみ配達します。ゲート; 以上がJavaScript イベント委任の詳細な紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。 に「バブル」され、
に 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 ノードのインタラクションは指数関数的に増加します。 従業員 B は JD.com の会員で、常に JD.com の自社運営製品を購入しており、JD.com は速達便で階下に商品を配達します;
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 要素ノードがトリガーされるときです。ノードに対応するイベントがない場合は、その親要素に対応するイベントがあるかどうかを確認します。ある場合は、 を実行します。そうでない場合は、上向きにチェックを続けます。これに対応するのがイベントキャプチャ
#です