Explication détaillée des exemples de délégation d'événements pour l'optimisation des performances Javascript

Cet article analyse la délégation d'événements de l'optimisation des performances JavaScript à travers des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Liez un événement de clic pour chaque LI ci-dessous

Go somewhereDo somethingSay hi

1. Écriture traditionnelle

var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3=document.getElementById("sayHi");
item1.onclick = function(){
  console.log('goSomewhere');
}
item2.onclick = function(){
  console.log('doSomething');
}
item3.onclick = function(){
  alert("hello");
}

En JavaScript, le nombre de gestionnaires d'événements ajoutés à la page sera directement lié aux performances globales d'exécution de la page. Plus il y a d'événements, plus la situation est mauvaise. performance.

Il y a plusieurs raisons :

1. Chaque fonction est un objet et occupera de la mémoire ; plus il y a d'objets dans la mémoire, plus les performances sont mauvaises.
2. Le nombre d'accès au DOM provoqué par la nécessité de spécifier tous les gestionnaires d'événements à l'avance retardera le temps de préparation interactive de la page entière.

2. Délégation d'événements

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

La délégation d'événements utilise le bouillonnement d'événements pour gérer tous les événements d'un certain type en spécifiant un seul gestionnaire d'événements. Par exemple : l’événement de clic remontera jusqu’au niveau du document. Autrement dit, nous pouvons spécifier un gestionnaire d'événements onclick pour la page entière sans avoir à ajouter des gestionnaires d'événements pour chaque élément cliquable.

Méthode de délégation d'événement :

var list=document.getElementById("myLinks");
list.onclick = function(e){
  var target = e.target;  
  switch(target.id){
   case "goSomewhere":
    console.log('goSomewhere');
    break; 
   case "doSomething":
    console.log('doSomething');
    break; 
   case "sayHi":
    alert("hello");
    break; 
  }
}

Avantages de l'utilisation de la délégation d'événement :

1) L'objet document est rapidement accessible et des gestionnaires d'événements peuvent y être ajoutés à tout moment du cycle de vie de la page (sans attendre les événements DOMContentLoaded ou de chargement). Autrement dit, dès qu’un élément cliquable est rendu sur la page, il est immédiatement fonctionnel.

2) Moins de temps est nécessaire pour configurer les gestionnaires d'événements dans la page. L'ajout d'un seul gestionnaire d'événements nécessite moins de références DOM et prend moins de temps.

3) La page entière occupe moins d'espace mémoire, ce qui peut améliorer les performances globales.

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

【Tutoriels associés recommandés】

1. Tutoriel vidéo JavaScript
2 Manuel en ligne JavaScript
3. tutoriel bootstrap