Proxy d'événement JavaScript et explication détaillée de l'utilisation de l'instance de proxy

Proxy d'événement JavaScript

Les proxys d'événement sont une fonctionnalité très utile et intéressante dans le monde JS. Lorsque nous devons ajouter des événements à de nombreux éléments, nous pouvons déclencher la fonction de gestionnaire en ajoutant l'événement à leur nœud parent et en déléguant l'événement au nœud parent.

Cela est principalement dû au mécanisme de bouillonnement d'événements du navigateur. Donnons un exemple spécifique pour expliquer comment utiliser cette fonctionnalité.

Cet exemple est principalement tiré de l'article connexe de David Walsh (Comment fonctionne la délégation d'événements JavaScript).

Supposons qu'il existe un nœud parent de UL, qui contient de nombreux nœuds enfants de Li :

<ul id="list">
 <li id="li-1">Li 1</li>
 <li id="li-2">Li 2</li>
 <li id="li-3">Li 3</li>
 <li id="li-4">Li 4</li>
 <li id="li-5">Li 5</li> 
</ul>

Quand notre souris se déplace sur Li Parfois, elle est nécessaire pour obtenir les informations pertinentes sur ce Li et ouvrir la fenêtre flottante pour afficher des informations détaillées, ou lorsque l'on clique sur un Li, l'événement de traitement correspondant doit être déclenché.

Notre façon habituelle d'écrire est d'ajouter des écouteurs d'événements comme onMouseOver ou onClick à chaque Li.

function addListenersLi(liElement) {
  liElement.onclick = function clickHandler() {
   //TODO
  };
  liElement.onmouseover = function mouseOverHandler() {
   //TODO
  }
 }

 window.onload = function() {
  var ulElement = document.getElementById("list");
  var liElements = ulElement.getElementByTagName("Li");
   for (var i = liElements.length - 1; i >= 0; i--) {
    addListenersLi(liElements[i]);
   } 
 }

Si les sous-éléments Li de cette UL seront ajoutés ou supprimés fréquemment, nous devons appeler la méthode addListenersLi à chaque fois que Li est ajouté. fonction de gestionnaire à chaque nœud Li.

Cela rendra le processus d'ajout ou de suppression complexe et la possibilité d'erreurs.

La solution au problème consiste à utiliser le mécanisme de proxy d'événement. Lorsqu'un événement est lancé vers le nœud parent supérieur, nous déterminons et obtenons la source de l'événement Li en vérifiant l'objet cible (cible) de l'événement.

Le code suivant peut obtenir l'effet souhaité :

/ 获取父节点，并为它添加一个click事件
document.getElementById("list").addEventListener("click",function(e) {
 // 检查事件源e.targe是否为Li
 if(e.target && e.target.nodeName.toUpperCase == "LI") {
 // 
 //TODO
 console.log("List item ",e.target.id," was clicked!");
 }
});

Ajouter un événement de clic au nœud parent lorsque vous cliquez sur le nœud enfant. L'événement click fera une bulle vers le haut à partir des nœuds enfants. Une fois que le nœud parent a capturé l'événement, il détermine s'il s'agit du nœud que nous devons traiter en jugeant e.target.nodeName. Et obtenez le nœud Li cliqué via e.target. De cette manière, les informations correspondantes peuvent être obtenues et traitées.

La fonction déléguée dans jQuery et Dojo
Voyons comment utiliser l'interface de proxy d'événement fournie dans Dojo et jQuery.

jQuery :

$("#list").delegate("li", "click", function(){
 // "$(this)" is the node that was clicked
 console.log("you clicked a link!",$(this));
});

la méthode déléguée de jQuery nécessite trois paramètres, un sélecteur, un nom d'heure et un gestionnaire d'événements.

Dojo est similaire à jQuery, la seule différence réside dans le style de programmation des deux :

require(["dojo/query","dojox/NodeList/delegate"], function(query,delegate){

 query("#list").delegate("li","onclick",function(event) {
 // "this.node" is the node that was clicked
 console.log("you clicked a link!",this);
 });
})

Le module délégué de Dojo est dans dojox.NodeList , l'interface fournie est la même que celle de jQuery et les paramètres sont également les mêmes.

Grâce à la délégation, vous pouvez bénéficier de plusieurs avantages liés à l'utilisation de la délégation d'événements pour le développement :

1. Il y a moins de fonctions à gérer. Il n'est pas nécessaire d'ajouter une fonction d'écoute pour chaque élément. Pour les éléments enfants similaires sous le même nœud parent, les événements peuvent être gérés en les déléguant à la fonction d'écoute de l'élément parent.

2. Vous pouvez facilement ajouter et modifier des éléments de manière dynamique, et il n'est pas nécessaire de modifier les liaisons d'événements en raison des changements dans les éléments.

3. Il y a moins de connexions entre les nœuds JavaScript et DOM, ce qui réduit la probabilité de fuites de mémoire causées par des références circulaires.

Utilisation de proxys dans la programmation JavaScript

Ce qui précède décrit comment utiliser le mécanisme de bouillonnement du navigateur pour ajouter des proxys d'événements aux éléments DOM lors du traitement des événements DOM. En fait, en programmation JS pure, nous pouvons également utiliser ce modèle de programmation pour créer des objets proxy pour faire fonctionner des objets cibles

var delegate = function(client, clientMethod) {
  return function() {
   return clientMethod.apply(client, arguments);
  }
 }
 var Apple= function() {
  var _color = "red";
  return {
   getColor: function() {
    console.log("Color: " + _color);
   },
   setColor: function(color) {
    _color = color;
   }
  };
 };

 var a = new Apple();
 var b = new Apple();
 a.getColor();
 a.setColor("green");
 a.getColor();
 //调用代理
 var d = delegate(a, a.setColor);
 d("blue");
 //执行代理
 a.getColor();
 //b.getColor();

Dans l'exemple ci-dessus, en appelant The. La fonction délégué() crée une fonction proxy d pour opérer la modification de a.

Bien que cette méthode utilise apply (call peut également être utilisé) pour réaliser le transfert de l'objet appelant, elle masque certains objets du mode de programmation et peut protéger ces objets contre un accès accidentel.

Le concept de délégation est utilisé dans de nombreux frameworks pour spécifier la portée d'exécution des méthodes.

Les plus typiques sont dojo.hitch(scope, method) et createDelegate(obj, args) d'ExtJS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!