La délégation de l'événement JavaScript est plus facile que vous ne le pensez

p>

Key TakeaWays h2>

• La délégation des événements JavaScript est une technique qui améliore les performances en réduisant le nombre de gestionnaires d'événements nécessaires. Au lieu d'attacher des gestionnaires d'événements individuels à chaque élément, un seul gestionnaire d'événements est ajouté à un élément parent, gérant des événements pour tous ses éléments enfants.
• La délégation d'événements fonctionne via l'événement et l'élément cible. Lorsqu'un événement est déclenché, il s'active également sur tous les ancêtres de l'élément, un processus connu sous le nom d'événement bouillonnant. L'élément cible, l'élément d'origine de l'événement, est stocké dans une propriété de l'objet de l'événement, vous permettant de déterminer où l'origine de l'événement est originaire.
• Alors que la délégation des événements améliore les performances et réduit l'utilisation de la mémoire, pas toutes les événements et la gestion des événements de la souris peut potentiellement devenir un embouteillage de performance. Par conséquent, il est important de gérer attentivement le code de la délégation d'événements pour éviter ces problèmes potentiels.

Si vous êtes à ajouter une petite interactivité JavaScript à vos pages Web, vous avez peut-être entendu parler de la délégation d'événements JavaScript et pensé que c'était l'un de ces modèles de conception compliqués uniquement des programmants Javascript. La vérité est que si vous savez déjà comment ajouter des gestionnaires d'événements JavaScript, c'est un instantané à implémenter.

Les événements JavaScript sont le fondement de toute interactivité sur les pages Web (je veux dire une interactivité sérieuse, pas les menus de chute Dinky CSS). Dans la gestion des événements traditionnels, vous ajoutez ou supprimez les gestionnaires d'événements de chaque élément selon les besoins. Cependant, les gestionnaires d'événements peuvent potentiellement provoquer des fuites de mémoire et une dégradation des performances - plus vous en avez, plus le risque est grand. La délégation d'événements JavaScript est une technique simple par laquelle vous ajoutez un seul gestionnaire d'événements à un élément parent afin d'éviter d'avoir à ajouter des gestionnaires d'événements à plusieurs éléments enfants.

Comment fonctionne-t-il?

La délégation d'événements utilise deux fonctionnalités souvent négligées des événements JavaScript: l'élément d'événement et l'élément cible. Lorsqu'un événement est déclenché sur un élément, par exemple une souris clique sur un bouton, le même événement est également déclenché sur tous les ancêtres de cet élément. Ce processus est connu sous le nom d'événement bouillonnant; L'événement bouillonne de l'élément d'origine vers le haut de l'arbre Dom. L'élément cible de tout événement est l'élément d'origine, le bouton de notre exemple, et est stocké dans une propriété de l'objet de l'événement. En utilisant la délégation d'événements, il est possible d'ajouter un gestionnaire d'événements à un élément, d'attendre qu'un événement bouillonne d'un élément enfant et de déterminer facilement à partir de l'élément de l'événement. Par exemple, j'ai dû rendre chaque cellule d'une table de cette taille modifiable lors du clic. L'ajout de gestionnaires d'événements à chacune des 1000 cellules serait un problème de performance majeur et, potentiellement, une source de fuites de mémoire de crash de navigateur. Au lieu de cela, en utilisant la délégation des événements, vous ne ajouteriez qu'un seul gestionnaire d'événements à l'élément de table, interceptez l'événement de clic et déterminez quelle cellule a été cliquée.

à quoi ressemble-t-elle dans le code?

Le code est simple; Nous devons seulement nous soucier de détecter l'élément cible. Disons que nous avons un élément de table avec le «rapport» ID et que nous avons ajouté un gestionnaire d'événements à la table pour l'événement de clic qui appellera la fonction EditCell. La fonction EditCell devra déterminer l'élément cible de l'événement qui a bouclé jusqu'à la table. En s'attendant à ce que nous rédigerons quelques fonctions de gestionnaire d'événements qui auront besoin de cette fonctionnalité, nous la placerons dans une fonction distincte appelée getEventTarget:

 Fonction getEventTarget (e) {e = e || window.event; return e.target || e.srcelement; } 

La variable E représente l'objet de l'événement et nous n'avons besoin que d'une pincée de code cross-browser pour accéder et renvoyer l'élément cible, stocké dans la propriété Srcelement dans Internet Explorer et la propriété cible dans d'autres navigateurs.

Suivant est la fonction EditCell qui appelle la fonction GetEventTarget. Une fois que nous avons une référence à l'élément cible, c'est à nous de nous assurer que l'élément est celui que nous attendons:

 fonction editCell (e) {var Target = getEventTarget (e); if (target.tagname.tolowercase () === 'td') {// faire quelque chose avec la cellule}} 

Dans la fonction EditCell, nous confirmons que l'élément cible est une cellule de table en vérifiant son nom de balise. Ce chèque peut être trop simplifié; Et si c'est un autre élément à l'intérieur de la cellule de table qui est la cible de l'événement? Une modification rapide qui ajoute du code pour trouver l'élément TD parent peut être nécessaire. Et si certaines cellules ne devaient pas être modifiables? Dans ce cas, nous pouvons ajouter un nom de classe spécifique à une cellule non éditable et vérifier que l'élément cible n'a pas cette valeur de nom de classe avant de la rendre modifiable. De nombreuses options sont disponibles et vous aurez juste besoin de choisir celle qui convient à votre application.

Quels sont les avantages et les inconvénients?

Les avantages de la délégation d'événements JavaScript sont:

• Il y a moins de gestionnaires d'événements à configurer et à résider en mémoire. C'est le grand; de meilleures performances et moins de collision.
• Il n'est pas nécessaire de reattacher les gestionnaires après une mise à jour DOM. Si le contenu de votre page est généré dynamiquement, via Ajax par exemple, vous n'avez pas besoin d'ajouter et de supprimer les gestionnaires d'événements car les éléments sont chargés ou déchargés.

Les problèmes potentiels peuvent être moins clairs, mais une fois que vous en êtes conscient, ils peuvent facilement évité:

• Il est possible que votre code d'événement ne puisse pas devenir un événement de performance, ne peut pas être en botte bulle. Les événements Blur, Focus, Charge et déchargement ne bouillonnent pas comme les autres événements. Les événements Blur and Focus sont en fait accessibles en utilisant la phase de capture (dans des navigateurs autres que IE) au lieu de la phase bouillonnante, mais c'est une histoire pour un autre jour.
• Vous avez besoin de prudence lors de la gestion de certains événements de souris. Si votre code gère l'événement MouseMove, vous risquez de créer un goulot d'étranglement des performances car l'événement Mousemove est déclenché si souvent. L'événement Mouseout a un comportement original qui est difficile à gérer avec la délégation des événements.

Résumé

Il existe des exemples de délégation d'événements JavaScript disponibles qui utilisent des bibliothèques principales: jQuery, Prototype et Yahoo! Ui. Vous pouvez également trouver des exemples en utilisant aucune bibliothèque, comme celui-ci à partir du blog de type utilisable.

La délégation des événements est un outil pratique à avoir dans votre kit si le besoin se produit et facile à implémenter.

Les questions fréquemment posées sur la délégation d'événements JavaScript

quel est le principal avantage de l'utilisation de la délégation des événements en javascript?

Délégation d'événements en Javascript est une technique qui profite du processus d'événement. Le principal avantage de l'utilisation de la délégation d'événements est qu'il améliore considérablement les performances en réduisant le nombre d'écouteurs d'événements attachés aux éléments. Au lieu d'attacher des écouteurs d'événements individuels à chaque élément, vous joignez un seul auditeur d'événements à un élément parent. Cet auditeur gère ensuite les événements pour tous ses éléments enfants. Ceci est particulièrement bénéfique lorsqu'il s'agit d'un grand nombre d'éléments similaires, tels que les éléments de liste ou les lignes de table.

Comment fonctionne la délégation des événements en JavaScript?

La délégation d'événements fonctionne-t-elle en tirant parti du processus de bouillonnement des événements en JavaScript. Lorsqu'un événement se produit sur un élément enfant, il bouillonne à travers l'arbre Dom, déclenchant le même événement sur chacun de ses éléments parents. En attachant un écouteur d'événements à un élément parent, vous pouvez gérer les événements pour tous ses éléments enfants. L'objet d'événement transmis au gestionnaire d'événements contient une propriété «cible», qui fait référence à l'élément réel qui a déclenché l'événement. Vous pouvez utiliser cette propriété pour déterminer comment gérer l'événement.

La délégation des événements peut être utilisée avec n'importe quel événement en javascript?

Oui, la délégation d'événements peut être utilisée avec tout événement en JavaScript qui bouillonne. Cependant, tous les événements ne bouillonnent pas. Par exemple, les événements «Focus» et «Blur» ne bouillonnent pas dans tous les navigateurs. Pour ces événements, vous pouvez utiliser les événements «FocusIn» et «Focusout», qui font bubble.

Comment puis-je arrêter les événements bouillonnant en javascript?

Vous pouvez arrêter l'événement qui bouillonne dans JavaScript en utilisant la méthode «stoppropagation» de l'objet d'événement. Cette méthode empêche l'événement de bouillonner l'arbre Dom. Cependant, soyez prudent lorsque vous utilisez cette méthode, car elle peut empêcher le déclenchement des autres gestionnaires d'événements.

Quelle est la différence entre la délégation d'événements et la liaison des événements dans JavaScript?

La liaison de l'événement dans JavaScript implique la connexion d'un écouteur d'événements directement à un élément. Cet auditeur ne gérera que des événements pour cet élément spécifique. D'un autre côté, la délégation des événements consiste à attacher un auditeur d'événements à un élément parent, qui gère les événements pour tous ses éléments enfants. Cette technique est plus efficace, surtout lorsqu'il s'agit d'un grand nombre d'éléments similaires.

Étant donné que l'écouteur d'événements est attaché à un élément parent, il peut gérer des événements pour les éléments enfants qui sont ajoutés au DOM une fois que l'auditeur a été joint.

Comment puis-je utiliser la délégation d'événements avec le mot-clé `` ce '' dans JavaScript?

Lors de l'utilisation de la délégation d'événements, le mot-clé '' Cet élément qui se réfère à l'élément de l'élément. Pour faire référence à l'élément qui a déclenché l'événement, vous pouvez utiliser la propriété 'cible' de l'objet de l'événement.

La méthode '.on ()' prend trois arguments: le type d'événement, un sélecteur pour les éléments enfants, et le gestionnaire d'événements.

Quel est l'impact des performances de l'utilisation de la délégation d'événements?

La délégation d'événements peut considérablement améliorer les performances, en particulier lorsqu'il s'agit d'un grand nombre d'éléments similaires. En joignant un seul auditeur d'événements à un élément parent, vous réduisez le nombre d'écouteurs d'événements qui doivent être gérés par le navigateur, ce qui peut conduire à une amélioration notable des performances.

Puis-je utiliser la délégation d'événements avec des événements personnalisés en javascript?

Oui, vous pouvez utiliser une délégation d'événements avec des événements personnalisés en javascript. Tout comme les événements intégrés, les événements personnalisés peuvent bouillonner l'arbre Dom, vous permettant de les gérer avec un seul écouteur d'événements attaché à un élément parent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!