Explication détaillée des connaissances flow_basic des événements DOM

1. Événements bouillonnants

Les modèles d'événements de navigateur sont divisés en deux types : les événements de capture et les événements bouillonnants. Étant donné qu'IE ne prend pas en charge la capture d'événements, ce qui suit utilise principalement les événements bouillonnants comme explication.
(Surnommé bouillonnement) Le bouillonnement signifie que les événements sont déclenchés un par un, de l'événement le plus spécifique à l'événement le moins spécifique.

Copier le code Le code est le suivant :

           

                ')"> cliquez sur moi

                                                                                   

Les trois fonctions ci-dessus ajoutent toutes la fonction onclick. Les trois fonctions sont déclenchées après que l'élément p unique soit exécuté en premier, puis le div et enfin le corps

.

Au fait, voici un rappel de la capture des événements, dont l'ordre est exactement à l'opposé des événements bouillonnants.

2. Surveillance des événements

Un événement nécessite qu'une fonction réponde. Ce type de fonction est généralement appelé gestionnaire d'événements. D'un autre point de vue, ces fonctions surveillent si un événement se produit en temps réel. Elles sont généralement appelées fonctions d'écoute d'événements (écouteur enevt). la fonction d'écoute des événements varie considérablement entre les différents navigateurs.

i. Méthodes d'écoute universelles, telles que l'utilisation de la méthode onclick, presque toutes les balises prennent en charge cette méthode. Et la compatibilité du navigateur est très élevée

Comptabilisation du comportement, séparation des événements.
Généralement, les méthodes suivantes sont utilisées pour la surveillance

Copier le code Le code est le suivant :

cliquez

Les deux méthodes présentées ci-dessus sont très pratiques et sont appréciées par les développeurs d'Everbright lors de la création et du traitement de certaines petites fonctions. Mais pour le même événement. Ils ne peuvent ajouter qu'une seule fonction, comme la fonction onclick de la marque p. Par conséquent, IE a sa propre solution. En même temps, le DOM standard fournit une autre méthode.

ii.Méthode d'écoute dans IE

Dans les premiers navigateurs IE, chaque élément dispose de deux méthodes pour gérer la surveillance du temps.
Il s'agit respectivement de attachEvent() et detachEnevt().
Comme le montrent leurs noms de fonction, attachEnevt() est une fonction utilisée pour ajouter un traitement d'événement à un élément, tandis que detachEvent() est utilisé pour supprimer la fonction d'écoute sur l'élément. Leur syntaxe est la suivante :

[object].attachEvent("enevt_handler","fnHandler");

[object].detachEvent("enevt_handler","fnHandler");
Parmi eux, enevt_handler représente onclick, onload, onmouseover, etc. couramment utilisés.
fnHandler est le nom de la fonction d'écoute.
Dans l'événement de la section précédente, vous pouvez utiliser la méthode attachEvent() au lieu d'ajouter une fonction d'écoute. Lorsque vous cliquez une fois, vous pouvez utiliser detachEvent() pour supprimer la fonction d'écoute afin qu'elle ne soit pas exécutée après le prochain clic. .

Copier le code Le code est le suivant :

                                                                                                                                                                                                                           

3. Surveillance standard des événements DOM

Par rapport aux deux méthodes de ie, le DOM standard utilise également deux méthodes pour ajouter et supprimer respectivement des fonctions d'écoute. C'est addEventListener() et removeEventListener()

Contrairement à ie, ces deux fonctions acceptent 3 paramètres, à savoir le nom de l'événement, le nom de la fonction à attribuer et si elle est utilisée en phase de bouillonnement ou en phase de capture. Les paramètres de la phase de capture sont vrais, et les paramètres de la phase de bouillonnement sont faux. La syntaxe est la suivante :

.

Copier le code

Le code est le suivant : [object].addEventListener("event_name",fnHandler,bCapture); [object].removeEventListener("event_name",fnHandler,bCapture);

L'utilisation de ces deux fonctions est fondamentalement similaire à celle dans Ie, mais veuillez noter que les noms de event_name sont "click", "mouseover", etc., au lieu de "onclick", "onmouseover" dans Ie.

De plus, le troisième paramètre bCapture est généralement réglé sur faux stade bouillonnant.

Méthode d'écoute standard des événements DOM :

Copier le code

Le code est le suivant :

               fonction fnClick1() {
alert("J'ai été cliqué 1");
oP.removeEventListener("click", fnClick1, false);
            }

fonction fnClick2() {
alert("J'ai été cliqué 2");
            }

              window.onload = function() {
oP = document.getElementById("myP");
oP.addEventListener("click", fnClick1, false);
               oP.addEventListener("click", fnClick2, false);
            }
                                                                                                                                                                                                                                                                                                                                                                                     

Cliquez sur moi

                                                                                   


Vous pouvez tester la séquence d'exécution spécifique.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn