Comment déclencher l'événement de clic dans JavaScript

Lors de la programmation en JavaScript, nous rencontrons souvent des situations où nous voulons invoquer n'importe quelle fonction sur le bouton cliquer. Par exemple, dans le cas des tests d'automatisation, vous devez tester certaines fonctionnalités supplémentaires d'une page Web ou d'un site. Dans de tels scénarios, la technique de déclenchement des événements de clics en JavaScript devient très pratique et efficace pour contrer les défis déclarés.

Cet article vous guidera sur la procédure pour déclencher des événements de clics dans JavaScript.

Comment déclencher l'événement de clic dans JavaScript?

Pour déclencher l'événement de clic dans JavaScript, appliquez les techniques suivantes:

• "Cliquez sur()" méthode
• "addEventListener ()" et "DispatchEvent ()«Méthodes

Maintenant, nous démontrerons l'utilisation des méthodes susmentionnées une par une!

Méthode 1: déclencher l'événement de clic dans JavaScript à l'aide de la méthode click ()

Le "Cliquez sur()«La méthode est utilisée pour effectuer un clic sur l'élément spécifié. Cette méthode peut être implémentée en créant un bouton, en obtenant son identifiant et en déclenchant l'événement de clic lorsque le bouton est cliqué à l'aide d'une fonction définie par l'utilisateur.

Passer par l'exemple suivant pour la démonstration.

Exemple
Dans l'exemple suivant, un bouton sera ajouté en ayant «Cliquez sur moi«Comme son identifiant et son événement ONClick associé, qui accédera au« accédera à «Clickevent ()" fonction:

Cliquez sur moi

Dans le code JavaScript, accédez au bouton créé en spécifiant son identifiant dans le document.Méthode GetElementById (). Après cela, la méthode «click ()» sera invoquée pour effectuer la nouvelle opération:

const get = document.getElementById ('btn');
obtenir.Cliquez sur();

Enfin, définissez la fonction nommée «Clickevent ()"De telle manière qu'il imprimera le message suivant sur la console lorsque le bouton est cliqué à l'aide du"Cliquez sur()" méthode:

fonction Clickevent ()
console.journal ("cliquez sur l'événement déclenché")

La sortie de l'implémentation ci-dessus en résultera comme suit:

Dans la sortie ci-dessus, il est observé que le bouton "Cliquez sur moi"Est cliqué de manière automatisée en utilisant le"Cliquez sur()" méthode. Pendant ce temps, la fonction Clickevent () est accessible et le message spécifié est enregistré sur la console.

Méthode 2: déclenchez l'événement de clic dans JavaScript à l'aide des méthodes «AddeveventListener ()» et «DispatchEvent ()»

Le "addEventListener ()»Méthode attache un gestionnaire d'événements à un objet DOM et à« le «DispatchEvent ()»La méthode envoie l'événement spécifié à l'objet. Ces méthodes peuvent être utilisées en combinaison pour créer un nouvel objet d'événement et exécuter l'événement de clic à l'aide de la fonction spécifiée.

Syntaxe

document.AddeventListener (événement, fonction)

Dans la syntaxe ci-dessus, "événement»Fait référence à l'événement spécifié et«fonction«Est la fonction sur laquelle l'événement doit être appliqué.

DispatchEvent (événement)

Ici, "événement»Fait référence à l'objet d'événement sélectionné qui doit être envoyé.

Présentation l'exemple suivant.

Exemple
La première étape consiste à inclure un bouton avec un ID, un événement OnClick et une valeur comme discuté dans la méthode précédente:

Cliquez sur moi

Ensuite, récupérez le bouton et ajoutez l'événement "Cliquez sur" en utilisant le "addEventListener ()"Méthode et spécifiez"e"Dans son argument qui fait référence à l'objet Event (Click). Puis le "DispatchEvent ()"La méthode va envoyer l'événement de clic sur un objet nommé"Événement«Comme démontré:

const get = document.getElementById ('btn');
obtenir.addEventListener ('click', e => );
obtenir.DispatchEvent (nouvel événement ('click'));

Enfin, définissez la même fonction Clickevent () que celle indiquée dans la méthode précédente pour afficher le message correspondant lorsque le «Cliquez sur»L'événement est déclenché:

fonction Clickevent ()
console.journal ("cliquez sur l'événement déclenché")

Sortir

Nous avons compilé différentes méthodes pour déclencher des événements de clics dans JavaScript.

Conclusion

Pour déclencher des événements de clics en JavaScript, le «Cliquez sur()«La méthode peut être appliquée pour récupérer le bouton et invoquer la fonction ajoutée en conséquence. Également "addEventListener ()" et "DispatchEvent ()«Les méthodes peuvent être utilisées pour inclure un événement spécifié et l'expédier à un objet nouvellement créé. Cet article a démontré les méthodes pour déclencher des événements de clics dans JavaScript.