Maîtriser la délégation d'événements en JavaScript : simplifier la gestion des événements

Délégation d'événement en JavaScript

Délégation d'événement est une technique en JavaScript où un seul écouteur d'événement est utilisé pour gérer les événements de plusieurs éléments enfants. Cette approche exploite le bullage d'événements pour améliorer les performances et simplifier le code lorsqu'il s'agit d'éléments créés dynamiquement ou de plusieurs éléments similaires.

1. Qu'est-ce que la délégation d'événement ?

Au lieu d'attacher des écouteurs d'événement à des éléments enfants individuels, vous attachez un seul écouteur à un élément parent. Cet auditeur capte les événements qui jaillissent de ses enfants.

Comment ça marche :

1. Ajouter un écouteur d'événement à un élément parent.
2. Utilisez la propriété event.target pour identifier quel élément enfant a déclenché l'événement.

2. Avantages de la délégation événementielle

• Performances améliorées : réduit le nombre d'écouteurs d'événements dans le DOM.
• Éléments dynamiques : gérez facilement les événements pour les éléments créés dynamiquement après le chargement de la page.
• Code plus simple : centralise la logique de gestion des événements.

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

Structure HTML

<ul>



<h4>
  
  
  <strong>JavaScript</strong>
</h4>



<pre class="brush:php;toolbar:false">const menu = document.getElementById("menu");

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

• L'événement click remonte des éléments li jusqu'à l'ul.
• L'instruction if garantit que seuls les clics li sont traités.

4. Gestion des éléments dynamiques

La délégation d'événements est idéale pour gérer des événements sur des éléments ajoutés dynamiquement.

Exemple :

const menu = document.getElementById("menu");

// Adding a new item dynamically
const newItem = document.createElement("li");
newItem.textContent = "Blog";
menu.appendChild(newItem);

// No need to add a new event listener
menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

5. Prévenir les comportements indésirables

Utilisez stopPropagation() ou des conditions spécifiques pour limiter la gestion des événements.

Exemple :

<ul>



<h4>
  
  
  <strong>JavaScript</strong>
</h4>



<pre class="brush:php;toolbar:false">const menu = document.getElementById("menu");

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

6. Applications pratiques

A. Tableaux interactifs

const menu = document.getElementById("menu");

// Adding a new item dynamically
const newItem = document.createElement("li");
newItem.textContent = "Blog";
menu.appendChild(newItem);

// No need to add a new event listener
menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

B. Validation du formulaire

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  } else {
    event.stopPropagation(); // Stop propagation for non-LI elements
  }
});

C. Éléments d'interface utilisateur dynamiques

<table>





<pre class="brush:php;toolbar:false">const table = document.getElementById("dataTable");

table.addEventListener("click", function(event) {
  if (event.target.tagName === "TD") {
    console.log("Clicked cell:", event.target.textContent);
  }
});

7. Mises en garde concernant la délégation d'événements

1. Problèmes de propagation : soyez prudent avec stopPropagation() car cela peut empêcher les bulles.
2. Performance Overhead : déléguez uniquement lorsque cela est nécessaire ; évitez de joindre un seul auditeur à l'ensemble du document, sauf si cela est nécessaire.
3. Ciblage d'événements : assurez un ciblage précis à l'aide de event.target et de conditions.

8. Résumé

• La délégation d'événements est un moyen efficace de gérer des événements pour plusieurs éléments à l'aide d'un seul écouteur.
• Il repose sur le bouillonnement d'événements et est particulièrement utile pour gérer les éléments ajoutés dynamiquement.
• Utilisez toujours event.target pour identifier l'élément spécifique qui a déclenché l'événement.

En maîtrisant la délégation d'événements, vous pouvez écrire du code JavaScript plus propre et plus efficace pour les applications Web interactives.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!