Qu'est-ce que DOM l'Événement délégation?

Question

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

Answer 1

DOM événement délégation est un mécanisme de réponse de l'interface utilisateur-événements au moyen d'un seul parent commun plutôt que chaque enfant, par la magie de l'événement "bouillonnement" (aka la propagation de l'évènement).

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

L'événement est distribué à sa cible EventTarget , et tout événement auditeurs trouvé il y a déclenchée. Bouillonnante les événements vont alors déclencher tout supplémentaire des écouteurs d'événement, trouvé par à la suite de la EventTargets'parent la chaîne vers le haut, en vérifiant pour tout événement les auditeurs inscrits sur chaque successives EventTarget. Cette hausse la propagation continuera jusqu'à y compris l' Document.

Remontée d'événements fournit la fondation pour l'événement délégation dans les navigateurs. Maintenant, vous pouvez lier un gestionnaire d'événements à un seul élément parent, et que le gestionnaire sera exécuté que lorsque l'événement se produit sur l'un de ses nœuds enfants (et leurs enfants). C'est l'événement de la délégation. Voici un exemple de cela dans la pratique:

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

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

Alors, quel est l'avantage?

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

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

Sans l'aide de l'événement de la délégation que vous auriez à "relier" l' "onclick" gestionnaire d'événement pour la nouvelle - <li> élément, pour agir de la même façon que ses frères et sœurs. Avec l' événement de la délégation vous n'avez pas besoin de faire quoi que ce soit. Il suffit d'ajouter le nouveau <li> à la liste et vous avez terminé.

C'est absolument fantastique pour les applications web avec des gestionnaires d'événement lié à de nombreux éléments, lorsque de nouveaux éléments sont créées dynamiquement et/ou retiré dans les DOM. Avec l'événement de la délégation du nombre de liaisons d'événements peut être considérablement diminué en les déplaçant d'un commun élément parent, et le code qui crée dynamiquement de nouveaux éléments à la volée peut être dissociée de la logique de la liaison de leurs gestionnaires d'événements.

Un autre avantage de l'événement, la délégation est que le total de la mémoire utilisée par les écouteurs d'événement va vers le bas (puisque le nombre de liaisons d'événements aller en bas). Il ne peut pas faire beaucoup de différence pour les petites pages qui débarquent souvent (c'est à dire de l'utilisateur de naviguer sur les différentes pages souvent). Mais pour les applications de longue durée, il peut être importante. Il y a certains vraiment difficile à suivre en cas de lorsque les éléments supprimés à partir du DOM prétendent toujours la mémoire (c'est à dire de fuite), et souvent, cette perte de mémoire est liée à un événement de liaison. Avec des événements de la délégation vous êtes libre de détruire des éléments d'enfant sans risque d'oubli "unbind" leurs écouteurs d'événement (depuis l'auditeur est sur l'ancêtre). Ces types de fuites de mémoire peuvent ensuite être contenue (si pas totalement éliminé, ce qui est freaking difficile à faire parfois. IE, je te regarde).

Voici quelques mieux béton exemples de code d'événement de la délégation:

• Comment Les Événements JavaScript Délégation Fonctionne
• Événement Délégation rapport à la gestion des Événements
• jQuery.délégué d'événement délégation + sélecteur de spécification
• jQuery.sur les utilisations de l'événement délégation lors passé un sélecteur comme le 2e paramètre
• Cas de délégation sans une bibliothèque JavaScript
• Fermetures vs Événement délégation: prend un regard sur les avantages de la non conversion de code pour utiliser l'événement de délégation
• Approche intéressante PPK à découvert pour déléguer l' focus et blur des événements (qui ne sont pas de bulle)

Answer 2

dom événement délégation est quelque chose de différent à partir de l'ordinateur de la science définition.

Il se réfère à la manipulation des événements de propagation à partir de nombreux éléments, comme les cellules d'un tableau, d'un objet parent, à l'instar de la table. Il peut garder le code plus simple, en particulier lors de l'ajout ou la suppression d'éléments, et permet d'économiser de la mémoire.

Answer 3

Délégation est une technique où un objet exprime un certain comportement à l'extérieur, mais en réalité délègue la responsabilité de la mise en œuvre d'un comportement à un objet associé. Cela peut sembler au premier abord très similaire au modèle de proxy, mais il sert un autre but. Délégation est une abstraction d'un mécanisme qui centralise l'objet (méthode) le comportement.

Généralement parlées: utiliser la délégation comme alternative à l'héritage. L'héritage est une bonne stratégie, quand une relation étroite existe entre le parent et l'enfant objet, toutefois, l'héritage des couples d'objets de très près. Souvent, la délégation est la plus souple pour exprimer une relation entre les classes.

Ce modèle est également connu comme "proxy chaînes". Plusieurs autres modèles de conception de l'utilisation de la délégation de l'État, de la Stratégie et des Visiteurs et des Modèles qui en dépendent.

Answer 4

La délégation concept

Si il y a de nombreux éléments à l'intérieur de l'un des parents, et que vous souhaitez gérer les événements sur eux d'entre eux - ne se lient pas les maîtres de chaque élément. Au lieu de cela, lier le seul gestionnaire de leur parent, et demandez à l'enfant de l'événement.cible. Ce site fournit des informations utiles sur la façon de mettre en œuvre des événements de la délégation. http://javascript.info/tutorial/event-delegation

Answer 5

Un délégué en C# est semblable à un pointeur de fonction en C ou C++. À l'aide d'un délégué permet au programmeur d'encapsuler une référence à une méthode à l'intérieur d'un délégué de l'objet. Le délégué de l'objet peut ensuite être transmis à un code qui peut appeler référencé dans la méthode, sans avoir à connaître au moment de la compilation de la méthode qui sera invoquée.

Voir ce lien --> http://www.akadia.com/services/dotnet%5Fdelegates%5Fand%5Fevents.html