JavaScript のイベント プロキシの簡単な分析

この記事の主な内容は、私が企業の Web フロントエンド開発職の最近の面接中に行った 配列重複排除の問題解決のアイデア に基づいており、それを皆さんと共有したいと思います。 。

質問自体は非常に単純です: ul には 1,000 の li があります。マウスがクリックされたときの li の内容と位置座標をマウス クリック イベントにバインドする方法です。 li の xy は警告されます。

123...1000

ブラウザの互換性、イベントのバブリング、効率などの問題を考慮する必要があります。質問を見て、次の答えを紙に直接書きました:

var ulItem = document.getElementById("ulItem");
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
 lis[i].onclick = function(){
 alert("内容："+this.innerHTML);
 alert("位置："+getElementPosition(this).x+","+getElementPosition(this).y;
 }
}
function getElementPosition(e){
 var x=0,y=0;
 while(e != null){
 x += e.offsetLeft;
 y += e.offsetTop;
 e = e.offsetParent;
 }
　　return {x:x, y:y};
}

インタビュー結果: 書き終わった後、もう一度読んで、あるように感じました。互換性を考慮する必要はありません。効率に関しては、考えても改善方法が思いつかなかったので、そのまま面接官に見せました。インタビュアーもとても親切で、それを読んだ後、「私が述べた重要な点を考慮していませんでした。ループ内にクリック イベントを 1,000 回追加するのは非常に非効率です。」そこで彼は、効率を上げるためにイベント バブリング機能、つまりイベント プロキシを使用することについて教えてくれました。まったく行われていません）。面接官の話を聞いて興奮したので、帰ってからもインターネットで調べてみました。

イベント委任。イベント委任とも呼ばれます。 は、JavaScript でイベントをバインドするための一般的な手法です。名前が示すように、「イベント プロキシ」は、本来親要素にバインドする必要があるイベントを委任し、親要素がイベント リスナーの役割を担うことができるようにします。

なぜこんなことをするのですか？ご存知のとおり、DOM 操作はパフォーマンスを非常に消費するため、イベント バインディングの繰り返しは単純にパフォーマンスを低下させます。イベント プロキシの中心的な考え方は、できる限り少ないバインディングを通じて、できるだけ多くのイベントを監視することです。プログラマー向けに、コードがない場合は、J8 とだけ言っておきます。コードは以下に掲載されています:

var ulItem = document.getElementById("ulItem");
ulItem.onclick = function(e){
 e = e || window.event;//这一行和下一行是为了兼容IE8以及之前版本
 var target = e.target || e.srcElement;
 if(target.tagName.toLowerCase() === "li"){
 alert(target.innerHTML);
 alert("位置为："+getElementPosition(target).x+","+getElementPosition(target).y);
 }
}
function getElementPosition(e){
 var x=0,y=0;
 while(e != null){
 x += e.offsetLeft;
 y += e.offsetTop;
 e = e.offsetParent;
 }
　　return {x:x, y:y};
}

さて、コードから for ループが削除されました。セックスの扱いに関しては、この答えで十分だと思います。上記で述べたことは、学術研究に照らして話しましょう。イベント エージェント:

従来のイベント処理では、必要に応じて、各要素のイベント ハンドラーを追加または削除します。ただし、イベント ハンドラーはメモリ リークやパフォーマンスの低下を引き起こす可能性があり、使用するほどリスクが増加します。 JavaScript イベント委任は、親要素にイベント ハンドラーを追加できるシンプルな手法であり、複数の子要素にイベント ハンドラーを追加する必要がなくなります。イベント プロキシは、JavaScript イベントでは見落とされがちな 2 つの機能、イベント バブリングとターゲット要素を使用します。ボタン上のマウスクリックなど、要素でイベントがトリガーされると、その要素のすべての祖先要素で同じイベントがトリガーされます。このプロセスはイベント バブリングと呼ばれます。イベントは元の要素から DOM ツリーの最上位までバブルアップします。イベントのターゲット要素は最初の要素 (この場合はボタン) であり、イベント オブジェクトのプロパティとして表示されます。イベント プロキシを使用すると、要素にイベント ハンドラーを追加し、その子要素からイベントがバブルアップするのを待って、イベントがどの要素から開始されたかを知ることができます。

イベント プロキシについては、今日が私にとっても初めてのことなので、皆さんの学習に役立つことを願って最初に書きます。関連するチュートリアルについては、JavaScript ビデオ チュートリアルを参照してください。 !