Explication détaillée des proxys d'événements JavaScript et des compétences délégués_javascript

En JavaScript, Agent et Délégué apparaissent souvent.

Alors dans quelles circonstances est-il utilisé ? Quel est son principe ?

Nous présentons ici l'utilisation et le principe du délégué javascript, ainsi que l'interface du délégué dans Dojo, jQuery et d'autres frameworks.

Proxy d'événement JavaScript
Les proxys d'événements 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 diffusion 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>

Lorsque notre souris se déplace sur Li, nous devons obtenir les informations pertinentes sur ce Li et faire apparaître une 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é pour ajouter un gestionnaire d'événements pour 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. Lorsque l'é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!");
 }
});

Ajoutez un événement de clic au nœud parent. Lorsque vous cliquez sur le nœud enfant, l'événement de clic apparaîtra à partir du nœud enfant. 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.

Evénement bouillonnant et captation
Mécanisme de propagation des événements du navigateur. Différents fabricants de navigateurs ont différents mécanismes de traitement pour capturer et traiter les événements. Nous présentons ici les événements standard définis par le W3C pour DOM2.0.

Le modèle DOM2.0 divise le processus de traitement des événements en trois étapes :

1. Phase de capture d'événement,

2. Étape cible de l'événement,

3. Étape bouillonnante événementielle.

Comme indiqué ci-dessous :

Capture d'événement : lorsqu'un élément déclenche un événement (comme onclick), le document objet de niveau supérieur émettra un flux d'événements, qui circulera vers le nœud de l'élément cible avec les nœuds de l'arborescence DOM jusqu'à ce qu'il atteigne le élément cible où l'événement se produit réellement. Durant ce processus, la fonction d'écoute correspondante de l'événement ne sera pas déclenchée.

Cible de l'événement : après avoir atteint l'élément cible, exécutez la fonction de traitement correspondante de l'événement de l'élément cible. Si aucune fonction d'écoute n'est liée, elle ne sera pas exécutée.

Bullage d'événement : à partir de l'élément cible et se propageant jusqu'à l'élément de niveau supérieur. S'il y a des nœuds liés aux fonctions de traitement d'événements correspondantes sur le chemin, ces fonctions seront déclenchées immédiatement. Si vous souhaitez empêcher les événements de bouillonner, vous pouvez utiliser e.stopPropagation() (Firefox) ou e.cancelBubble=true (IE) pour empêcher les événements de bouillonner.

fonction de délégation 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 :

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 se trouve dans dojox.NodeList. Il fournit la même interface que jQuery et les mêmes paramètres.

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 de gestion. 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 de 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
L'introduction ci-dessus consiste à 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, la modification de a s'effectue en appelant la fonction proxy d créée par la fonction délégué().

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 tout accès et modification accidentelle.

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

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.