浅い分析javascriptの中の事件の代行

この文章の主な内容は、先日ある会社のWeb前端開発職位を面接した時に作った一連の問題解決の考え方に基づいて整理し、皆さんに共有します.
テーマ自体は簡単です.1つのulの中に1000個のliがあります.どのようにこの千個のliに一つのマウスを結び付けてイベントをクリックします.マウスがクリックした時、alertはこのliの内容とliの位置座標xyを出します.

1 2 3 …
1000 ブラウザの互換性、イベントの発泡、効率などを考慮する必要があります.問題を見たら、直接紙に次のような答えを書きました.

var ulItem = document.getElementById("ulItem");
var lis = document.getElementsByTagName("li");
for(var i=0; i　　return {x:x, y:y};
}

面接の結果:書き終わったらもう一度読んでみましたが、互換性を考える必要はないと思います.効率的に考えたら、どうやって向上するのか思い出せないので、そのまま面接官に見せました.面接官もとてもいいです.彼は見てから言いました.「あなたは私の話のポイントを考えていませんでした.このように1000回の循環でクリックするのは効率が低いです.そして、事件の泡が発生する特性を利用して、効率を高めること、すなわちイベントエージェント(ps:以前にプロジェクトをやっていましたが、事件の泡が発生しないようにする時がありますが、事件の泡立ち特性を利用して効率を上げることはまだ分かりません)について話してくれました.面接官の話を聞きました.ポーズを上げました.帰ってきたら自分もインターネットで調べてみました.今は自分で自分の勉強を記録するためにまとめましょう.
イベントエージェント(Event Delegation)は、イベント依頼とも呼ばれる.JavaScriptでよく使われるバインディングイベントの一般的なテクニックです.名前の通り、「イベントエージェント」とは本来バインディングが必要だったイベントを親要素に委託し、父要素にイベントの傍受を担当させる役割です.なぜこのようにしますか?DOM動作は十分に性能を消費することが知られているので、繰り返しイベントバインディングは完全に性能キラーである.イベントエージェントの核心思想は、できるだけ少ない結合を通じて、できるだけ多くのイベントを監督することです.プログラム猿のことです.コードなしでJ 8と言ってください.コードを貼り付けます.

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イベントエージェントは、簡単なテクニックです.イベントプロセッサを親レベル要素に追加することができます.これにより、イベントプロセッサを複数のサブレベル要素に追加することができます.イベントエージェントは、JavaScriprtイベントにおいてしばしば無視される二つの特性を使用している.元素上のイベントがトリガされると、例えばマウスがボタンを押したら、同じイベントがその要素のすべての祖先要素の中でトリガされます.この過程は事件の泡が立つと言われています.このイベントは元の元素からDOMツリーの最上層まで泡が立ちます.いずれのイベントのターゲット要素も最初の要素であり、この例ではボタンであり、私たちのイベントオブジェクトには属性として現れます.イベントエージェントを使用して、イベントプロセッサを要素に追加できます.イベントがサブレベルの要素から泡が出るのを待っています.このイベントはどの要素から始まったのかを知ることができます.
事件の代理については、今日も初めてです.ここに書いてください.みなさんの勉強に役に立ちますように.