Définition et explication de la délégation d'événements DOM

Question

Quelqu'un peut-il expliquer la délégation d'événements en JavaScript et ce qu'elle fait ?

Answer 1

La délégation d'événements DOM est un mécanisme permettant de répondre aux événements de l'interface utilisateur via un seul élément parent commun plutôt que chaque élément enfant, obtenu grâce à la magie du « bouillonnement » d'événements (également connu sous le nom de propagation d'événements).

Lorsqu'un événement est déclenché sur un élément, ce qui suit se produit :

Le bouillonnement d'événements constitue la base de la délégation d'événements dans les navigateurs. Vous pouvez désormais lier un gestionnaire d'événements à un seul élément parent, et chaque fois qu'un événement se produit sur l'un de ses nœuds enfants, le gestionnaire sera exécuté (avec ses enfants). Il s'agit d'une délégation événementielle. En voici un exemple pratique :

<ul onclick="alert(event.type + '!')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Dans cet exemple, si vous cliquez sur n'importe quel sous <li>节点，您将看到一个"click!"的警告，即使没有将<li>上的点击处理程序绑定。如果我们将onclick="..."绑定到每个<li>, vous obtiendrez le même effet.

Alors quels sont les avantages ?

Supposons que vous ayez maintenant besoin d'ajouter dynamiquement de nouveaux <li> éléments à la liste ci-dessus via la manipulation DOM :

var newLi = document.createElement('li');
newLi.innerHTML = 'Four';
myUL.appendChild(newLi);

Si vous n'utilisez pas la délégation d'événements, vous devrez relier le gestionnaire d'événements "onclick" au nouvel élément "onclick"事件处理程序到新的<li>元素上，以使其与其兄弟元素表现相同。使用事件委托，您不需要做任何事情。只需将新的<li> pour qu'il se comporte de la même manière que ses frères et sœurs. Avec la délégation d’événements, vous n’avez rien à faire. Ajoutez simplement un nouveau

à la liste et vous avez terminé.

C'est idéal pour les applications Web qui ont des gestionnaires d'événements liés à de nombreux éléments, où de nouveaux éléments sont créés et/ou supprimés dynamiquement du DOM. Avec la délégation d'événements, le nombre de liaisons d'événements peut être considérablement réduit, en les déplaçant vers un élément parent commun, et le code qui crée dynamiquement les éléments peut être découplé de la logique des gestionnaires d'événements qui les lient.

Un autre avantage de la délégation d'événements est que l'empreinte mémoire totale utilisée par les écouteurs d'événements est réduite (car le nombre de liaisons d'événements est réduit). Pour les petites pages fréquemment déchargées (c'est-à-dire que les utilisateurs naviguent fréquemment vers des pages différentes), cela peut ne pas avoir beaucoup d'impact. Mais pour les applications à long terme, cela peut être important. Il existe des cas très difficiles à suivre dans lesquels, lorsque des éléments sont supprimés du DOM, ils occupent toujours de la mémoire (c'est-à-dire qu'ils fuient), et souvent cette fuite de mémoire est liée à des liaisons d'événements. En utilisant la délégation d'événements, vous pouvez librement détruire des éléments enfants sans avoir à vous soucier d'oublier de "dissocier" leurs écouteurs d'événements (puisque les écouteurs sont sur des éléments ancêtres). Ces types de fuites de mémoire peuvent être contenus (sinon complètement éliminés, ce qui est parfois très difficile à faire. IE, je vous regarde).

Voici quelques exemples de code concrets pour une meilleure délégation d'événements : 🎜

• Comment fonctionne la délégation d'événements JavaScript
• Comparaison de la délégation d'événements et du traitement des événements
• jQuery.delegate est la spécification du délégué d'événement + du sélecteur
• jQuery.onUtiliser un délégué d'événement lors du passage du sélecteur comme deuxième paramètre
• Délégation événementielle sans bibliothèque JavaScript
• Closures vs. Délégation d'événement : jetez un œil aux avantages de ne pas convertir votre code pour utiliser la délégation d'événement
• Une méthode intéressante découverte par PPKDélégationfocus和blurEvent(ne fera pas de bulles)