Méthode de l'auditeur de l'événement DOM en javascript

Vous pouvez ajouter l'écouteur d'événements aux éléments HTML DOM avec l'aide du addEventListener () méthode. La méthode AddeventListener () vous permet de contrôler la réaction de l'événement correspondant. Le JavaScript est isolé du texte HTML lorsque vous utilisez la méthode AddEventListener (), ce qui facilite la compréhension et vous permettant d'ajouter des écouteurs d'événements même si vous ne contrôlez pas le balisage HTML.

Cet article discutera du Écouteur de l'événement DOM Méthode en javascript. Nous expliquerons l'utilisation de la méthode de l'écouteur de l'événement DOM pour ajouter des gestionnaires uniques et multiples aux éléments HTML. De plus, des exemples liés à la bulle d'événements et à la capture d'événements seront également démontrés. Alors, commençons!

Méthode de l'auditeur de l'événement DOM en javascript

En tant que programmeur JavaScript, vous pouvez utiliser la méthode DOM AddEventListener () pour l'ajout d'un écouteur d'événements sur n'importe quel objet HTM tel que les objets de fenêtre, les éléments HTML, le document HTML ou l'objet XMLHTTPRequest.

Il existe un autre "sur" Propriété JavaScript utilisée dans le même but; Cependant, il n'est pas très utile par rapport à la méthode addeventListener () car la méthode DOM AddEventListener () vous permet d'ajouter plusieurs écouteurs d'événements sur un objet de fenêtre ou un élément HTML.

Syntaxe de la méthode addEventListener ()

objet.AddeventListener (événement, fonction, useCapture);

Ici, le premier paramètre, "événement" est ajouté pour spécifier l'événement pour lequel vous souhaitez ajouter le gestionnaire d'événements; le deuxième paramètre, "fonction" invoque la fonction qui sera exécutée lorsque l'événement spécifié se produit. Le troisième paramètre est facultatif; où vous devez ajouter soit«Capture d'événements» ou "Événement bouillonnant".

Exemple 1: Utilisation de la méthode de l'écouteur DOM NEER pour ajouter un gestionnaire d'événements dans JavaScript

Cet exemple vous montrera la procédure d'ajout d'une méthode d'écouteur d'événements DOM pour l'événement de souris «cliquez» dans JavaScript. Tout d'abord, nous ajouterons une rubrique avec le

Tag, un paragraphe avec le

Tag, et un bouton en utilisant la balise:

Méthode de l'auditeur de l'événement DOM en javascript

Ce programme JavaScript a utilisé AddEventListener ()

Nous avons également ajouté un ID "Button1" pour notre "Cliquez sur moi" bouton:

Cliquez sur moi

La méthode GetElementByid sera invoquée pour trouver et obtenir le bouton "Button1" identifiant. Après cela, le "AddeventListener ()" la méthode ajoutera un "Cliquez sur" événement qui déclenchera le "DisplayDate ()" méthode:

Exécutez le programme donné ci-dessus dans votre éditeur de code préféré ou tout autre bac à sable codant en ligne; Cependant, nous utiliserons le JSBIN à cet effet:

Après avoir obtenu la sortie, cliquez sur le "Cliquez sur moi" bouton pour vérifier l'heure et la date actuelles:

Exemple 2: Utilisation de la méthode de l'écoute DOM Enier pour ajouter plusieurs gestionnaires d'événements dans JavaScript

JavaScript offre également la fonctionnalité pour ajouter plusieurs gestionnaires d'événements pour le même objet. Pour démontrer sa procédure, nous avons écrit le programme JavaScript suivant avec un titre, un paragraphe et un bouton ayant "Button1" identifiant. Notez que nous ajouterons plusieurs gestionnaires d'événements pour le "bouton" Élément HTML:

Ajouter un gestionnaire d'événements en javascript

Ce programme JavaScript a utilisé AddEventListener ()

Cliquez sur moi

Dans l'étape suivante, nous allons un "un" objet qui trouvera et obtiendra le bouton avec "Button1" Id en invoquant le document.Méthode GetElementById ():

Frapper le "Cliquez sur moi" bouton, et vous obtenez deux alertes sur votre navigateur, l'une après l'autre:

Exemple 3: Utilisation de la méthode de l'écouteur des événements DOM pour ajouter un gestionnaire d'événements à l'objet Window dans JavaScript

Dans l'exemple suivant, nous ajoutons la méthode addeventListener () à la "fenêtre" objet. La méthode AddEventListener () ajoutée sera déclenchée lorsqu'un utilisateur effectue le "souris vers le bas" action:

JavaScript addEventListener ()

Cet exemple utilise la méthode addEventListener () sur l'objet Window.

Nous passerons également un "événement" s'opposer à la méthode addeventListener (). Le "événement" L'objet comprend toutes les informations liées au souris vers le bas événement:

L'exécution du programme JavaScript ci-dessus affichera la sortie suivante:

Maintenant, appuyez sur le "gauche" Bouton de souris sur l'élément sélectionné, et vous verrez l'alerte suivante:

Événement bouillonnant en javascript

En JavaScript, l'événement bouillonnant est un événement qui bouillonne de la cible ou des éléments les plus profonds de ses parents, puis il suit l'approche du bas à la première approche et déplace le flux de contrôle vers ses ancêtres. La bouillonnement des événements est considérée comme une méthode de flux d'événements par défaut dans tous les navigateurs modernes.

Exemple: événement bouillonnant en javascript

Dans l'exemple suivant, nous avons ajouté un titre avec la balise, un élément div avec l'ID «Parentement» et son élément de bouton d'enfant imbriqué ayant l'ID «Childelement»:

Enfant

Après avoir attribué les éléments HTML créés en utilisant le "document.queySelector () " Méthode, nous ajouterons un auditeur d'événements à deux div «Parentement» Et c'est imbriqué «Childelement» bouton. La fonction a passé dans le "AddeventListener ()" affichera la chaîne ajoutée dans le "console.enregistrer()" méthode:

Maintenant, nous cliquerons sur le "Enfant" bouton, qui peut être vu dans la sortie suivante:

En cliquant sur le "Enfant" bouton, le passé "fonction()" dans la méthode AdveventListener () sera exécutée. Puis le "sur clic()" Méthode de la "Div" L'élément sera invoqué. Tout cela se passe à cause du "Événement bouillonnant":

Dans l'exemple ci-dessus, lorsque nous avons cliqué "Enfant" bouton, le "Cliquez sur" L'événement est passé du bouton avec ID «Childelement» et le contrôle du flux d'événements se déplace vers le "document" Dans l'ordre suivant:

Capture d'événements en javascript

Le processus dans lequel un événement est capturé lorsque son flux de contrôle passe de l'élément supérieur à la cible ou à l'élément le plus extérieur est connu sous le nom de capture d'événements. Bien que les navigateurs modernes n'aient pas la capacité d'activer la capture d'événements par défaut, vous pouvez effectuer cette opération via le code JavaScript.

Exemple: capture d'événements en javascript

Dans notre programme JavaScript, tout d'abord, nous ajouterons un titre et un "Div" élément ayant une pièce d'identité «Parentelement» et son élément enfant avec «Childelement» identifiant:

Enfant

Ensuite, nous invoquerons le "document.queySelector () " Méthode pour obtenir l'élément parent et enfant:

Ce qui suit "Enfant" Le bouton invoque d'abord l'événement ajouté à l'élément parent. Après cela, il exécutera l'événement attaché à la cible de l'événement:

Dans l'exemple ci-dessus, lorsque nous avons cliqué "Enfant" bouton, le "Cliquez sur" L'événement est passé de l'élément parent qui est «document», à l'objectif de l'événement spécifié «Childelement» bouton:

Conclusion

En utilisant la méthode DOM AddEventListener (), vous pouvez ajouter un écouteur d'événements à l'objet Window et aux éléments HTML. Sans écraser les gestionnaires d'événements existants, la méthode JavaScript AddeveventListener () attribue un gestionnaire d'événements à l'objet spécifique. De plus, un objet de fenêtre unique peut également avoir plusieurs gestionnaires d'événements. Cette rédaction a discuté de la méthode de l'écouteur de l'événement DOM en JavaScript. Nous avons également expliqué l'utilisation de la méthode de l'écouteur des événements DOM pour ajouter des gestionnaires uniques et multiples aux éléments HTML. De plus, des exemples liés à la bulle d'événements et à la capture d'événements sont également démontrés.