JavaScript - Délégation d'événements

Salut à toi, aspirant.e.s programmeur.euse.s ! Aujourd'hui, nous allons plonger dans une des techniques les plus puissantes et efficaces de JavaScript : la délégation d'événements. Ne t'inquiète pas si tu es nouveau.e dans la programmation ; je vais te guider à travers ce concept étape par étape, comme j'ai fait pour des centaines d'étudiant.e.s au fil des ans. Alors, prends une tasse de café (ou ta boisson favorite), et mettons-nous ensemble sur cette aventure passionnante !

Qu'est-ce que la délégation d'événements ?

Avant de rentrer dans les détails, comprehensionnons ce qu'est vraiment la délégation d'événements. Imagine que tu es un.e manager dans un grand bureau. Plutôt que d'attribuer personnellement des tâches à chaque employé.e, tu délégues des responsabilités aux chefs d'équipe, qui ensuite répartissent le travail. C'est essentiellement ce que la délégation d'événements fait en JavaScript !

La délégation d'événements est une technique où nous attachons un seul écouteur d'événement à un élément parent au lieu d'attacher plusieurs écouteurs aux éléments enfants individuels. Cela non seulement rend notre code plus efficace, mais permet également de gérer des événements sur des éléments qui pourraient même ne pas exister au moment du chargement de la page !

Pourquoi utiliser la délégation d'événements ?

Tu te demandes peut-être : "Pourquoi me soucier de la délégation d'événements ?" Eh bien, laisse-moi te partager une petite histoire de mes débuts dans l'enseignement. J'avais une fois un étudiant qui a créé une application de liste de tâches. Pour chaque tâche, il a ajouté un écouteur d'événement distinct. À la centième tâche, son application était plus lente qu'un escargot grimpe une montagne ! C'est alors que je lui ai présenté la délégation d'événements, et hop ! Son application fonctionnait aussi rond que du beurre.

Voici quelques avantages clés :

1. Performance : Moins d'écouteurs d'événement signifient moins d'utilisation de mémoire et des temps de chargement de page plus rapides.
2. Éléments dynamiques : Ça fonctionne avec des éléments ajoutés au DOM après le chargement initial de la page.
3. Moins de code : Tu écris moins de code, ce qui signifie moins de chances pour les bugs de s'incruster.

Étapes de la délégation d'événements

Maintenant que nous comprenons le 'pourquoi', regardons le 'comment'. La délégation d'événements implique trois étapes principales :

1. Identifier l'élément parent

Premièrement, nous devons choisir un élément parent qui va agir comme notre délégué d'événement. Cela devrait être un élément qui contient tous les éléments enfants que tu veux surveiller.

2. Attacher l'écouteur d'événement à l'élément parent

Ensuite, nous attachons notre écouteur d'événement à cet élément parent.

3. Déterminer quel élément a déclenché l'événement

Enfin, lorsqu'un événement se produit, nous devons vérifier quel élément enfant l'a déclenché et répondre en conséquence.

Voyons ces étapes en action avec quelques exemples de code !

Exemples de délégation d'événements

Exemple 1 : Délégation d'événement de base

Commençons par une liste non ordonnée simple de fruits :

<ul id="fruitList">
<li>Pomme</li>
<li>Banane</li>
<li>Cerise</li>
</ul>

Au lieu d'ajouter des événements de clic à chaque <li>, nous utiliserons la délégation d'événements :

document.getElementById('fruitList').addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
console.log("Tu as cliqué sur " + e.target.textContent);
}
});

Dans ce code :

• Nous attachons l'écouteur d'événement à l'élément parent <ul>.
• Lorsqu'un clic se produit, nous vérifions si l'élément cliqué (e.target) est un <li>.
• Si c'est le cas, nous enregistrons le contenu textuel de l'
• cliqué.

De cette manière, même si nous ajoutons plus de fruits à notre liste plus tard, la gestion des événements continuera à fonctionner sans aucun code supplémentaire !

Exemple 2 : Création d'éléments dynamiques

Reprenons un peu plus de complexité. Nous allons créer une liste de tâches simple où les utilisateurs peuvent ajouter de nouveaux éléments :

<input type="text" id="newTodo">
<button id="addTodo">Ajouter une tâche</button>
<ul id="todoList"></ul>

Voici le JavaScript :

const todoList = document.getElementById('todoList');
const newTodo = document.getElementById('newTodo');
const addTodo = document.getElementById('addTodo');

addTodo.addEventListener('click', function() {
if(newTodo.value !== '') {
const li = document.createElement('li');
li.textContent = newTodo.value;
todoList.appendChild(li);
newTodo.value = '';
}
});

todoList.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
e.target.classList.toggle('completed');
}
});

Dans cet exemple :

• Nous pouvons ajouter des nouvelles tâches dynamiquement.
• Nous utilisons la délégation d'événements pour gérer les clics sur toutes les tâches, même celles ajoutées après le chargement initial de la page.
• Cliquez sur une tâche pour basculer une classe 'completed'.

Exemple 3 : Actions multiples avec la délégation d'événements

Reprenons notre liste de tâches et ajoutons des boutons pour éditer et supprimer des tâches :

<ul id="advancedTodoList"></ul>

Et voici notre JavaScript amélioré :

const advancedTodoList = document.getElementById('advancedTodoList');

// Fonction pour créer un nouvel élément de tâche
function createTodoItem(text) {
const li = document.createElement('li');
li.innerHTML = `
<span>${text}</span>
<button class="edit">Éditer</button>
<button class="delete">Supprimer</button>
`;
advancedTodoList.appendChild(li);
}

// Délégation d'événement pour toute la liste
advancedTodoList.addEventListener('click', function(e) {
const target = e.target;

if(target.className == 'delete') {
const li = target.parentNode;
advancedTodoList.removeChild(li);
} else if(target.className == 'edit') {
const span = target.previousElementSibling;
const newText = prompt("Édite ta tâche :", span.textContent);
if(newText !== null) {
span.textContent = newText;
}
}
});

// Ajouter quelques tâches initiales
createTodoItem("Apprendre la délégation d'événements");
createTodoItem("Maitriser JavaScript");

Dans cet exemple avancé :

• Nous utilisons un seul écouteur d'événement sur le parent <ul> pour gérer les actions d' édition et de suppression.
• L'écouteur d'événement vérifie la classe du bouton cliqué pour déterminer l'action.
• Cette approche est scalable et efficace, peu importe le nombre d'éléments de tâche que nous avons.

Conclusion

Et voilà, mes chers étudiants ! Nous avons traversé le territoire de la délégation d'événements, de ses concepts de base à ses implémentations plus avancées. Souviens-toi, comme avec tout outil puissant, la délégation d'événements brille le mieux lorsqu'elle est utilisée avec sagesse. Ce n'est pas toujours la meilleure solution pour chaque situation, mais lorsqu'il s'agit de multiples éléments enfants similaires ou de contenu créé dynamiquement, c'est souvent ton meilleur ami.

Pendant que tu continues ton aventure en programmation, continue d'expérimenter avec ces concepts. Essaye de combiner la délégation d'événements avec d'autres fonctionnalités de JavaScript que tu apprends. Qui sait ? Tu pourrais créer la prochaine grande application web qui change le monde !

Jusqu'à notre prochaine leçon, bon codage, et que tes événements se délèguent toujours en douceur !

Credits: Image by storyset