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

Quelqu'un peut-il expliquer la délégation d'événement en JavaScript et en quoi est-ce utile?

Author: Bergi, 2009-11-06
Source

7 answers

DOM event delegation est un mécanisme de réponse aux événements de l'interface utilisateur via un seul parent commun plutôt que chaque enfant, par la magie de l'événement "bubbling" (aka event propagation).

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

L'événement est envoyé à sa cible {[2] } et tous les auditeurs d'événements trouvé là sont déclenchés. Bouillonnement les événements déclencheront alors auditeurs d'événements supplémentaires trouvés par suivant le parent de EventTarget chaîne vers le haut, vérification de tout événement auditeurs inscrits sur chaque successives EventTarget. Cette hausse la propagation se poursuivra jusqu'à et y compris le Document.

Event bubbling fournit la base de la délégation d'événements dans les navigateurs. Vous pouvez maintenant lier un gestionnaire d'événements à un élément parent unique, et ce gestionnaire sera exécuté chaque fois que l'événement se produira sur l'un de ses nœuds enfants (et l'un de leurs enfants à son tour). Il s'agit de la délégation d'événements. En voici un exemple dans la pratique: 

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

Avec cet exemple, si vous cliquiez sur l'un des nœuds enfant <li>, vous verriez une alerte de "click!", même s'il n'y a pas de gestionnaire de clics lié au <li> sur lequel vous avez cliqué. Si nous lions onclick="..." à chaque <li>, vous obtiendrez le même effet.

Alors, quel est l'avantage?

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

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

Sans utiliser la délégation d'événements, vous devrez "relier" le gestionnaire d'événements "onclick" au nouvel élément <li>, afin qu'il agisse de la même manière que ses frères et sœurs. Avec délégation d'événement, vous n'avez rien à faire. Ajoutez simplement le nouveau <li> à la liste et vous avez terminé.

C'est absolument fantastique pour les applications Web avec des gestionnaires d'événements liés à de nombreux éléments, où de nouveaux éléments sont créés dynamiquement et/ou supprimés dans le DOM. Avec 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 de nouveaux éléments à la volée peut être découplé de la logique de liaison de leurs gestionnaires d'événements.

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 diminue (puisque le nombre de liaisons d'événements diminue). Cela peut ne pas faire beaucoup de différence avec les petites pages qui se déchargent souvent (c'est-à-dire la navigation de l'utilisateur à différentes pages souvent). Mais pour les applications à longue durée de vie, cela peut être important. Il y a des situations vraiment difficiles à suivre lorsque des éléments supprimés du DOM revendiquent toujours de la mémoire (c'est-à-dire qu'ils fuient), et souvent cette mémoire divulguée est liée à une liaison d'événement. Avec la délégation d'événements, vous êtes libre de détruire les éléments enfants sans risque d'oublier de "dissocier" leurs écouteurs d'événements (puisque l'écouteur est sur l'ancêtre). Ces types de fuites de mémoire peuvent alors être contenus (sinon éliminé, ce qui est parfois difficile à faire. IE, je te regarde).

Voici quelques meilleurs exemples concrets de code de délégation d'événement:

 257
Author: Crescent Fresh, 2014-05-21 12:37:42

La délégation d'événements vous permet d'éviter d'ajouter des écouteurs d'événements à des nœuds spécifiques; à la place, l'écouteur d'événements est ajouté à un parent. Cet écouteur d'événements analyse les événements bubbled pour trouver une correspondance sur les éléments enfants.

Exemple JavaScript:

Disons que nous avons un élément UL parent avec plusieurs éléments enfants: 

<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>

Disons aussi que quelque chose doit se produire lorsque chaque élément enfant est cliqué. Vous pouvez ajouter un écouteur d'événement distinct à chacun élément LI individuel, mais que se passe-t-il si des éléments LI sont fréquemment ajoutés et supprimés de la liste? Ajouter et supprimer des écouteurs d'événements serait un cauchemar, surtout si le code d'ajout et de suppression se trouve à différents endroits dans votre application. La meilleure solution consiste à ajouter un écouteur d'événement à l'élément UL parent. Mais si vous ajoutez l'écouteur d'événement au parent, comment saurez-vous quel élément a été cliqué?

Simple: lorsque l'événement fait des bulles jusqu'à l'élément UL, vous vérifiez propriété target pour obtenir une référence au nœud cliqué réel. Voici un extrait JavaScript très basique qui illustre la délégation d'événements: 

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
    // List item found!  Output the ID!
    console.log("List item ", e.target.id.replace("post-"), " was clicked!");
       }
 });

Commencez par ajouter un écouteur d'événement clic de l'élément parent. Lorsque l'écouteur d'événement est déclenché, vérifiez l'événement élément pour s'assurer que c'est le type d'élément à réagir. Si c'est un élément LI, boom: nous avons ce dont nous avons besoin! Si ce n'est pas un élément que nous voulons, l'événement peut être ignoré. Cet exemple est assez simple UL UL et LI est un straight-forward de comparaison. Essayons quelque chose de plus difficile. Ayons une DIV parent avec beaucoup d'enfants mais tout ce qui nous intéresse est une balise A avec la classe CSS classA: 

  // Get the parent DIV, add click listener...
  document.getElementById("myDiv").addEventListener("click",function(e) {
// e.target was the clicked element
if(e.target && e.target.nodeName == "A") {
    // Get the CSS classes
    var classes = e.target.className.split(" ");
    // Search for the CSS class!
    if(classes) {
        // For every CSS class the element has...
        for(var x = 0; x < classes.length; x++) {
            // If it has the CSS class we want...
            if(classes[x] == "classA") {
                // Bingo!
                console.log("Anchor element clicked!");
                // Now do something here....
            }
        }
    }

  }
});

Http://davidwalsh.name/event-delegate

 21
Author: Osama AbuSitta, 2015-10-08 12:31:40

Dom event delegation est quelque chose de différent de la définition de l'informatique.

Il fait référence à la gestion des événements de bulles de nombreux éléments, comme les cellules de table, à partir d'un objet parent, comme la table. Il peut garder le code plus simple, en particulier lors de l'ajout ou de la suppression d'éléments, et économise de la mémoire.

 7
Author: kennebec, 2009-11-06 14:24:50

La délégation est une technique où un objet exprime un certain comportement vers l'extérieur mais délègue en réalité la responsabilité de l'implémentation de ce comportement à un objet associé. Cela semble d'abord très similaire au modèle proxy, mais il sert un but très différent. La délégation est un mécanisme d'abstraction qui centralise le comportement de l'objet (méthode).

Généralement parlé: utilisez la délégation comme alternative à l'héritage. L'héritage est une bonne stratégie, quand un proche il existe une relation entre l'objet parent et l'objet enfant, cependant, l'héritage couple très étroitement les objets. Souvent, la délégation est le moyen le plus flexible d'exprimer une relation entre les classes.

Ce modèle est également connu sous le nom de "chaînes proxy". Plusieurs autres modèles de conception utilisent la délégation - l'État, la Stratégie et les Modèles de visiteurs en dépendent.

 5
Author: Ewan Todd, 2009-11-06 12:40:43

Le concept de délégation

S'il y a beaucoup d'éléments dans un parent et que vous voulez gérer les événements sur eux - ne liez pas les gestionnaires à chaque élément. Au lieu de cela, liez le gestionnaire unique à son parent et obtenez l'enfant de l'événement.cible. Ce site fournit des informations utiles sur la mise en œuvre de la délégation d'événements. http://javascript.info/tutorial/event-delegation

 5
Author: Joseph, 2014-01-01 07:28:59

Un délégué en C# est similaire à un pointeur de fonction en C ou C++. L'utilisation d'un délégué permet au programmeur d'encapsuler une référence à une méthode à l'intérieur d'un objet délégué. L'objet délégué peut ensuite être passé au code qui peut appeler la méthode référencée, sans avoir à savoir au moment de la compilation quelle méthode sera invoquée.

Voir ce lien --> http://www.akadia.com/services/dotnet_delegates_and_events.html

 3
Author: Bhaskar, 2009-11-06 12:40:58

C'est essentiellement la façon dont l'association est faite à l'élément. .cliquez sur s'applique au DOM actuel, tandis que .on (en utilisant la délégation) continuera à être valide pour les nouveaux éléments ajoutés à l'association après événement DOM.

Ce qui est préférable à utiliser, je dirais que cela dépend du cas.

Exemple:

<ul id="todo">
   <li>Do 1</li>
   <li>Do 2</li>
   <li>Do 3</li>
   <li>Do 4</li>
</ul>

.Cliquez sur Événement: 

$("li").click(function () {
   $(this).remove ();
});

Événement .sur:

$("#todo").on("click", "li", function () {
   $(this).remove();
});

Notez que j'ai séparé le sélecteur dans le .sur. Je vais vous expliquer pourquoi.

Supposons qu'après cela association, faisons ce qui suit: 

$("#todo").append("<li>Do 5</li>");

C'est là Que vous remarquerez la différence.

Si l'événement a été associé par .cliquez, la tâche 5 n'obéira pas à l'événement click et ne sera donc pas supprimée.

S'il était associé via .on, avec le sélecteur séparé, il obéira.

 0
Author: Lucas Sanches Paranhos, 2018-09-13 19:01:12