javascript_javascript スキルにおけるイベントプロキシに関する予備調査-jsチュートリアル-php.cn

javascript_javascript スキルにおけるイベントプロキシに関する予備調査

WBOY

リリース： 2016-05-16 16:56:23

オリジナル

1048 人が閲覧しました

イベントは常に JavaScript で最も強力なオブジェクトの 1 つです。 JavaScript には、イベントを DOM ノードにバインドするための 2 つのメソッド、addEventListener とattachEvent が用意されています。jquery はイベントをさらにカプセル化し、さまざまなブラウザと互換性のあるバインドメソッドを提供します。今見てみると、この従来のイベントバインド方法には次の欠点があります。

1. 多くの EventHander をバインドする必要がある場合があります。

ページ内のテーブルに 100 行がある場合、クリックイベントを各行にバインドする必要があります。その場合、100 個の EventHandler をバインドする必要がありますが、これらのハンドラーを保存するためにより多くのメモリを作成する必要があるため、ページのパフォーマンスに大きな負担がかかります。

2. DOM ノードにバインドした後はイベントを追加できません。

ページ内のコードが次のとおりであるとします。

コードをコピーしますコードは次のとおりです:

$( "#dv").bind('click',function(){alert('test');});
$(body).append('

test')

はクリックイベントをトリガーできません。

これら 2 つの問題を解決するために、JavaScript にはイベントプロキシが導入されました。まずはjsにおけるバブリングの仕組みを理解しましょう。

基本的にすべてのブラウザはイベントバブリングをサポートしています。 DOM ノードでイベントがトリガーされると、イベントはドキュメントのルートノードまで伝播されます。すべてのノードイベントは最終的にドキュメントルートノードに配信されるため、イベントをドキュメントルートノード (ドキュメントノード) に直接バインドし、event.target を使用してどのノードがイベントをトリガーしたかを判断すると、大幅にコストが削減されます。 EventHandler についてはどうでしょうか?

jquery の live メソッドは、この原則に基づいて公式に実装されています。 live の単純なバージョンを実装してみましょう:

コードをコピーしますコードは次のとおりです:

$.fn.mylive=function(eventType,fn){
var that=this.selector;
$(document).bind(eventType, function(event){
var match=$(event.target).closest(that)
if(match.length !== 0){
fn.apply($(event.target), [イベント ]);
}
})
}

$("#tb td").mylive('click',function(event){
alert(event.target.innerHTML);
});

var tb='

最初の列

二列目

3列目

';
$("body").append(tb);

ライブメソッドでは、イベントはドキュメントノードにバインドされており、$(event.target).closest(that) は実際にイベントをトリガーした要素と一致します。デモでは、後で追加した各 TD にクリックイベントをバインドしました。別の TD をクリックすると、対応するテキストプロンプトボックスがポップアップすることがわかります。

ライブ方式は、前述した従来のイベントバインディング方式の 2 つの欠点を補います。しかし、ライブ方式にはまだ欠点があります。このコードを見てください:

コードをコピーしますコードは次のとおりです:

$(" #tb td" ).mylive('click',function(event){
alert(event.target.innerHTML);
});

最初に全体を走査します。 jquery selector に基づいてドキュメントを作成し、すべての #tb td 要素を見つけてオブジェクトとして保存します。ただし、ライブ実装方法ではこれらのオブジェクトは使用せず、イベントソースと一致する文字列として「#td td」のみを使用します。これにより、不必要な消費が大幅に増加します。

では、この状況を改善する方法はあるのでしょうか?デリゲートプロキシメソッドは jQuery で提供されており、ドキュメントだけでなく指定された要素へのイベントのバインドをサポートします。その原理を理解した上で、単純なバージョンのデリゲートを実装してみましょう:

コードをコピーしますコードは次のとおりです:

$(body).append('

');

$.fn.mydelegate=function(selector,eventType,fn){
$(this).bind(eventType,function(event){
var match=$(event.target).closest( selector);
if(match.length !== 0){
fn.apply($(event.target),[event]);
}
});
}

$("#dv").mydelegate('td','click',function(event){
alert(event.target.innerHTML);
});

var tb='

最初の列

二列目

3列目

';
$("dv").append(tb);

mydeletage メソッドはすべての td オブジェクトを取得する必要はなく、イベントがバインドされている div オブジェクトを取得するだけで済みます。実行効率の点では、ライブ方式よりも優れています。

これは、イベントプロキシの原理を誰もが理解できるようにするための単なる紹介です。jquery での live と delegate の実装はさらに複雑です。