Une brève analyse du proxy d'événement en javascript

Le contenu principal de cet article est basé sur une idée de résolution de problèmes de déduplication de matrice que j'ai réalisée lors d'un récent entretien pour un poste de développement front-end Web dans une entreprise, et j'aimerais la partager avec vous. .

La question en elle-même est très simple : il y a mille li dans un ul. Comment lier un événement de clic de souris à ces mille li. Lorsque l'on clique sur la souris, le contenu du li et la position sont coordonnés. xy du li sera alerté. ,

123...1000

Vous devez prendre en compte la compatibilité du navigateur, le bouillonnement des événements, l'efficacité et d'autres problèmes. Après avoir vu la question, j'ai écrit la réponse suivante directement sur le 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};
}

Résultats de l'entretien : Après avoir fini d'écrire, je l'ai relu et j'ai senti qu'il y avait pas besoin de considérer la compatibilité. Les événements bouillonnent. Quant à l'efficacité, après y avoir réfléchi, je ne voyais pas comment l'améliorer, alors je l'ai simplement montré à l'intervieweur. L'intervieweur était également très gentil. Après l'avoir lu, il a déclaré : Vous n'avez pas pris en compte les points clés que j'ai mentionnés. Il est très inefficace pour vous d'ajouter des événements de clic dans une boucle 1 000 fois. Ensuite, il m'a parlé de l'utilisation de la fonction de bouillonnement d'événements pour améliorer l'efficacité, c'est-à-dire du proxy d'événements (ps : j'ai rencontré des moments où je devais empêcher le bouillonnement d'événements lors de la réalisation de projets dans le passé, mais l'utilisation de la fonction de bouillonnement d'événements pour améliorer l'efficacité a pas été fait du tout. Après avoir écouté ce que l'intervieweur a dit, j'ai été excité. Après mon retour, j'ai également vérifié sur Internet. Maintenant, je vais le résumer comme un enregistrement de mon processus d'apprentissage :

Événement. Délégation, également appelée délégation événementielle. est une technique courante pour lier des événements en JavaScript. Comme son nom l'indique, "event proxy" délègue les événements qui doivent initialement être liés à l'élément parent, permettant à l'élément parent de jouer le rôle d'écouteur d'événements.

Pourquoi fais-tu ça ? Comme nous le savons tous, les opérations DOM sont très gourmandes en performances, donc la liaison d'événements répétés est tout simplement un tueur de performances. L'idée principale du proxy d'événements est de surveiller autant d'événements que possible via le moins de liaisons possible. Pour les programmeurs, s'il n'y a pas de code, laissez-moi juste dire J8. Le code est publié ci-dessous :

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

Eh bien, maintenant le code a supprimé la boucle for, ce qui améliore l'efficacité et est compatible. Concernant le traitement du sexe, j'estime que cette réponse devrait être adéquate. Ce que j'ai dit ci-dessus est juste pour une question de test écrit. Parlons-en à la lumière de la recherche académique Agent événementiel :

Dans le traitement événementiel traditionnel, vous. Ajoutez ou supprimez des gestionnaires d'événements pour chaque élément selon vos besoins. Cependant, les gestionnaires d'événements peuvent potentiellement provoquer des fuites de mémoire ou une dégradation des performances - le risque augmente à mesure que vous les utilisez. La délégation d'événements JavaScript est une technique simple qui vous permet d'ajouter des gestionnaires d'événements à un élément parent, évitant ainsi d'avoir à ajouter des gestionnaires d'événements à plusieurs éléments enfants. Le proxy d'événement utilise deux fonctionnalités qui sont souvent négligées dans les événements JavaScript : la diffusion d'événements et les éléments cibles. Lorsqu'un événement est déclenché sur un élément, comme un clic de souris sur un bouton, le même événement sera déclenché sur tous les éléments ancêtres de cet élément. Ce processus est appelé bouillonnement d'événement ; l'événement remonte de l'élément d'origine jusqu'au sommet de l'arborescence DOM. L'élément cible de tout événement est le premier élément, dans notre cas le bouton, et il apparaît comme une propriété dans notre objet événement. À l'aide de proxys d'événement, nous pouvons ajouter un gestionnaire d'événements à un élément, attendre qu'un événement surgisse de ses éléments enfants et savoir à partir de quel élément l'événement a commencé.

Concernant le proxy d'événement, c'est aussi aujourd'hui mon premier contact avec lui, je vais donc écrire ceci en premier, j'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de tutoriels connexes, veuillez visiter le Tutoriel vidéo JavaScript. !