Eine kurze Analyse des Event-Proxys in Javascript

Der Hauptinhalt dieses Artikels basiert auf einer Idee zur Lösung von Array-Deduplizierungsproblemen , die ich kürzlich während eines Vorstellungsgesprächs für die Web-Front-End-Entwicklungsposition eines Unternehmens gemacht habe, und ich möchte sie gerne mit Ihnen teilen .

Die Frage selbst ist sehr einfach: Es gibt tausend Lis in einer Straße. Wie man ein Mausklickereignis an diese tausend Lis bindet xy der li wird benachrichtigt,

123...1000

Sie müssen Browserkompatibilität, Ereignissprudelung, Effizienz und andere Probleme berücksichtigen. Nachdem ich die Frage gesehen hatte, schrieb ich die folgende Antwort direkt auf das Papier:

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};
}

Interviewergebnisse: Nachdem ich mit dem Schreiben fertig war, las ich es noch einmal und hatte das Gefühl, dass es so ist Es besteht kein Grund, auf Kompatibilität Rücksicht zu nehmen. Was die Effizienz angeht, fiel mir nach dem Nachdenken nicht ein, wie ich sie verbessern könnte, also habe ich sie einfach dem Interviewer gezeigt. Der Interviewer war auch sehr nett, nachdem er es gelesen hatte: Sie haben die wichtigsten Punkte, die ich erwähnt habe, nicht berücksichtigt. Es ist sehr ineffizient, Klickereignisse 1.000 Mal in einer Schleife hinzuzufügen. Dann erzählte er mir von der Verwendung der Event-Bubbling-Funktion zur Verbesserung der Effizienz, also des Event-Proxys (ps: Ich habe in der Vergangenheit Zeiten erlebt, in denen ich das Event-Bubbling bei der Durchführung von Projekten verhindern musste, aber die Verwendung der Event-Bubbling-Funktion zur Verbesserung der Effizienz hat es getan wurde überhaupt nicht gemacht. Nachdem ich mir angehört hatte, was der Interviewer gesagt hatte, war ich aufgeregt. Nachdem ich zurückgekommen war, habe ich auch im Internet nachgesehen. Jetzt werde ich es als Aufzeichnung meines Lernprozesses zusammenfassen:

Ereignis Delegation, auch Ereignisdelegation genannt. ist eine gängige Technik zum Binden von Ereignissen in JavaScript. Wie der Name schon sagt, delegiert „Event Proxy“ die Ereignisse, die ursprünglich an das übergeordnete Element gebunden werden müssen, sodass das übergeordnete Element die Rolle des Ereignis-Listeners übernehmen kann.

Warum machst du das? Wie wir alle wissen, sind DOM-Operationen sehr leistungsintensiv, daher ist die wiederholte Ereignisbindung einfach ein Leistungskiller. Die Kernidee des Event-Proxys besteht darin, möglichst viele Ereignisse durch möglichst wenige Bindungen zu überwachen. Für Programmierer: Wenn es keinen Code gibt, sagen wir einfach J8. Der Code ist unten aufgeführt:

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};
}

Nun hat der Code die for-Schleife entfernt. Was die Effizienz verbessert und die Kompatibilität gewährleistet, sollte meiner Meinung nach diese Antwort angemessen sein. Was ich oben gesagt habe, ist nur eine schriftliche Testfrage. Lassen Sie uns im Lichte der akademischen Forschung darüber sprechen. Eventagent:

Sie Fügen Sie nach Bedarf Ereignishandler für jedes Element hinzu oder entfernen Sie sie. Event-Handler können jedoch möglicherweise Speicherverluste oder Leistungseinbußen verursachen – das Risiko steigt, je häufiger Sie sie verwenden. Die JavaScript-Ereignisdelegierung ist eine einfache Technik, mit der Sie einem übergeordneten Element Ereignishandler hinzufügen können, sodass Sie nicht mehreren untergeordneten Elementen Ereignishandler hinzufügen müssen. Der Event-Proxy nutzt zwei Funktionen, die bei JavaScript-Events oft übersehen werden: Event-Bubbling und Zielelemente. Wenn ein Ereignis für ein Element ausgelöst wird, beispielsweise ein Mausklick auf eine Schaltfläche, wird dasselbe Ereignis für alle Vorgängerelemente dieses Elements ausgelöst. Dieser Vorgang wird als Ereignis-Bubbling bezeichnet. Das Ereignis sprudelt vom ursprünglichen Element an die Spitze des DOM-Baums. Das Zielelement jedes Ereignisses ist das erste Element, in unserem Fall die Schaltfläche, und es erscheint als Eigenschaft in unserem Ereignisobjekt. Mithilfe von Ereignis-Proxys können wir einem Element einen Ereignishandler hinzufügen, darauf warten, dass ein Ereignis aus seinen untergeordneten Elementen hervortritt, und wissen, von welchem ​​Element das Ereignis ausgegangen ist.

Was den Event-Proxy betrifft, habe ich heute auch zum ersten Mal Kontakt damit. Ich hoffe, dass es für alle hilfreich ist. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial !