Compétences d'analyse de l'utilisation de la délégation d'événements JavaScript_javascript

Les exemples de cet article décrivent l'utilisation de la délégation d'événements JavaScript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Cliquez sur n'importe quelle partie de la page pour déclencher un événement

Créez un fichier script1.js.

Copier le code Le code est le suivant :

(function() {
EventUtility.addEvent(document, "clic", function(evt) {
alert('bonjour');
});
}());

Section des pages.

Copier le code Le code est le suivant :

 

Résultats de sortie : cliquer n'importe où sur la page fera apparaître une boîte de dialogue.

Cependant, nous souhaitons parfois cliquer sur un élément du document pour déclencher un événement.

2. Utiliser la délégation pour déclencher des événements

Ajoutez une balise à la page.

Copier le code Le code est le suivant :

 

                                                                                                                                   

Modifiez script1.js en :

Copier le code Le code est le suivant :

(function() {

EventUtility.addEvent(document, "clic", function(evt) {
//Obtenir l'objet clic
        var target = eventUtility.getTarget(evt);
//Obtenir le nom de la balise de l'objet cliqué
        var tagName = target.tagName;
​​​​ //Si le tag est un
Si (tagName === "A") {
alert("cliquez sur moi");
//Comportement par défaut des liens bloquants
              eventUtility.preventDefault(evt);
>
});
}());

Résultat de sortie : ce n'est que lorsque l'on clique sur la balise a de la page que la boîte apparaît.
L'avantage de ce qui précède est le suivant : quel que soit le nombre d'éléments de balise ajoutés au document, toutes les balises ont la capacité d'être déclenchées. Une approche comme celle-ci est la délégation d’événements. Nous voulons enregistrer des événements pour les éléments enfants, mais enregistrons d'abord l'événement sur l'élément parent de l'élément enfant. De cette manière, tous les éléments ajoutés dynamiquement du même type que l'élément enfant dans l'élément parent sont enregistrés pour l'événement.

Si nous enregistrons des événements dans des sous-éléments, puis ajoutons dynamiquement des éléments du même type en tant que sous-éléments dans le document, nous devons enregistrer des événements pour ces sous-éléments nouvellement ajoutés dynamiquement.

De plus, la délégation événementielle fait bon usage du « bouillonnement événementiel ». Lorsqu'un élément enfant est cliqué, selon le « bullage d'événements », l'élément parent de l'élément enfant capture l'événement de clic et déclenche sa propre méthode.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.