Exemple de technologie de délégation d'événements JavaScript Analysis_Javascript skills

Cet article analyse la technologie de délégation d'événements JavaScript avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

S'il y a un grand nombre de boutons dans une page entière, nous devons lier des gestionnaires d'événements à chaque bouton. Cela affectera les performances.

Tout d'abord, chaque fonction est un objet, et l'objet occupera beaucoup de mémoire. Plus il y a d'objets dans la mémoire, plus les performances sont mauvaises

.

Deuxièmement, une augmentation du nombre de visites DOM entraînera un retard dans le chargement des pages. En fait, il existe encore de bonnes solutions pour faire bon usage des gestionnaires d'événements.

Délégué à l'événement :

La solution au problème du trop grand nombre de gestionnaires d'événements est la technologie de délégation d'événements.

La technologie de délégation d'événements tire parti du bouillonnement d'événements.

Nous pouvons lier les gestionnaires d'événements à un élément parent qui doit déclencher un événement.

<ul id="mylist">    
  <li id="li_1">sdsdsd</li>    
  <li id="li_2">sdsdsd</li>    
  <li id="li_3">sdsdsd</li>
</ul>

Maintenant, nous devons lier les gestionnaires d'événements pour ces 3 Li..

Il suffit de lier le gestionnaire d'événements dans ul.

obj.eventHandler($("mylist"),"click",function(e){
  e = e || window.event;
  switch(e.target.id){
//大家应该还记得target是事件目标,
//只要点击了事件的目标元素就会弹出相应的alert.
 case "li_1":
 alert("li_1");
 break;
 case "li_2":
 alert("li_2");
 break;
 case "li_3":
 alert("li_3");
 break
  }
})

S'il s'agit d'une application web complexe, ce type de délégation d'événements est très pratique.

Si vous n'utilisez pas cette méthode, les lier un par un entraînera d'innombrables gestionnaires d'événements.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.