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

La délégation d'événements est un modèle de conception qui permet à un seul gestionnaire d'événements de gérer les événements de plusieurs éléments enfants. Au lieu d'attribuer un gestionnaire à chaque élément, le gestionnaire est attribué à l'élément parent. Lorsqu'un événement se produit sur un élément enfant, il "remonte" (bubbling) jusqu'au parent, où le gestionnaire peut l'intercepter et le traiter.

Principe de fonctionnement :

• L'événement est généré sur l'élément cible (par exemple, <button>).
• L'événement se propage vers le haut dans l'arbre DOM jusqu'aux éléments parents.
• Le gestionnaire d'événements, attaché à l'élément parent, intercepte l'événement.
• Dans le gestionnaire, on peut déterminer sur quel élément enfant l'événement s'est produit en utilisant event.target.

Avantages :

• Performance : Moins de gestionnaires d'événements, ce qui réduit la consommation de mémoire et de processeur, surtout pour de longues listes ou tableaux.
• Simplicité de gestion : Plus facile d'ajouter et de supprimer des éléments du DOM, car il n'est pas nécessaire d'attacher/détacher constamment des gestionnaires.
• Clarté du code : Moins de code répétitif pour attacher des gestionnaires.

Exemple :

Supposons que nous ayons une liste d'éléments et que nous voulions réagir à un clic sur chacun.

Sans délégation, il faudrait attacher un gestionnaire à chaque <li>:

// Obtenir tous les éléments <li>
const listItems = document.querySelectorAll('li');

// Attacher un gestionnaire à chaque élément
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Clic sur:', this.textContent);
    });
});

Avec délégation, on attache le gestionnaire uniquement au <ul>:

// Obtenir la liste parente
const list = document.querySelector('ul');

// Attacher le gestionnaire à la liste
list.addEventListener('click', function(event) {
    // Vérifier si le clic était sur un <li>
    if (event.target.tagName === 'LI') {
        console.log('Clic sur:', event.target.textContent);
    }
});

Dans cet exemple, on utilise event.target pour déterminer quel <li> a été cliqué.