Apprenez la délégation d'événements en JavaScript comme si vous aviez 5 ans

Attacher un seul écouteur d'événement à un élément parent, au lieu d'ajouter des auditeurs distincts à chaque enfant, est la technique connue sous le nom de délégation d'événement. Cela fonctionne grâce au bullage d'événements, où un événement (comme un clic) remonte l'arborescence DOM de l'enfant au parent. En gérant les événements au niveau parent, vous pouvez économiser de la mémoire et améliorer les performances, en particulier lorsque vous traitez de nombreux éléments enfants ou des éléments ajoutés dynamiquement.

Comment ça marche ?

Lorsqu'un événement est déclenché sur un élément enfant (par exemple, un clic), il ne s'arrête pas là. L'événement remonte jusqu'à son parent, et ainsi de suite, jusqu'à l'arborescence DOM jusqu'à ce qu'il atteigne la racine du document. La délégation d'événements en profite en plaçant l'écouteur d'événement sur un ancêtre commun de tous les éléments enfants cibles. Cet ancêtre écoute les événements qui jaillissent des éléments enfants et les gère en fonction de certaines conditions, telles que le type d'événement ou l'élément enfant spécifique qui a déclenché l'événement.

Exemple de délégation d'événement

Disons que nous avons une liste de boutons et que nous voulons gérer un événement de clic pour chaque bouton. Au lieu d'ajouter un écouteur d'événement de clic à chaque bouton, nous pouvons ajouter un seul écouteur à leur élément parent.

<ul id="buttonList">
  <li><button data-action="delete">Delete</button></li>
  <li><button data-action="edit">Edit</button></li>
  <li><button data-action="view">View</button></li>
</ul>

Maintenant, au lieu d'ajouter un écouteur d'événement de clic à chaque bouton, nous attachons un seul écouteur au parent

élément.


document.getElementById("buttonList").addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");

    if (action === "delete") {
      console.log("Deleting item...");
    } else if (action === "edit") {
      console.log("Editing item...");
    } else if (action === "view") {
      console.log("Viewing item...");
    }
  }
});

L'écouteur d'événement click est attaché au

élément (le parent). Dans le gestionnaire d'événements, nous vérifions si l'élément cliqué est un bouton en utilisant event.target.tagName === "BUTTON". Cela garantit que nous répondons uniquement aux clics sur les boutons. Nous utilisons l'attribut data-action pour déterminer l'action à entreprendre (supprimer, modifier ou afficher). Cette approche est plus efficace et évolutive, surtout si nous avions de nombreux boutons ou si nous en ajoutions dynamiquement de nouveaux.

Un autre exemple avec des éléments dynamiques

Si la liste des boutons était générée dynamiquement (par exemple, en ajoutant de nouveaux boutons via JavaScript), la délégation d'événements fonctionnerait toujours parfaitement sans avoir besoin de rattacher les écouteurs d'événements.


const ul = document.getElementById("buttonList");

// Dynamically adding new buttons
const newButton = document.createElement("li");
newButton.innerHTML = '<button data-action="share">Share</button>';
ul.appendChild(newButton);

// The same event listener on the parent will handle the new button
ul.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");
    console.log(action + " button clicked.");
  }
});

Event Bubbling : la délégation d'événements fonctionne grâce au bouillonnement d'événements, où un événement déclenché sur un élément enfant se propage jusqu'à ses ancêtres.

Efficace pour le contenu dynamique : Puisque nous attachons l'écouteur d'événement au parent, cela fonctionne pour les éléments ajoutés ultérieurement au DOM.

Performances : réduit la surcharge liée à l'attachement et à la gestion de plusieurs écouteurs d'événements, en particulier avec un grand nombre d'éléments enfants.

La délégation d'événements est une technique essentielle pour une gestion efficace des événements DOM, en particulier lorsqu'il s'agit de nombreux éléments ou de contenu dynamique.

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!