Nous sommes essentiellement confrontés à un certain type de situation lors de la programmation en javascript dans laquelle nous pouvons créer n'importe quelle fonction en cliquant sur un bouton. Par exemple, nous devons examiner quelques fonctionnalités supplémentaires lors des tests d'automatisation d'une page Web ou d'un site. Dans de tels cas, la technique de déclenchement d'événement de clic de javascript devient plus fiable et efficace pour contrer les défis signalés.
Dans ce contexte, nous découvrirons les procédures d'événement déclencheur de clic en javascript.
je sais
Comment pouvons-nous déclencher un événement de clic en javascript :
Nous devons appliquer les techniques données ci-dessous pour déclencher l'événement click en javascript :
a) méthode click()
b) Méthodes addEventListener() et dispathEvent
Nous allons maintenant utiliser les méthodes décrites ci-dessus pour démontrer ce qui suit :
Méthode 1 :
Déclenchez un événement de clic à l'aide de la méthode d'événement de clic en javascript :
Sur l'élément mentionné, le méthode de clic est utilisé pour effectuer l’action. En utilisant la fonction définie par l'utilisateur lorsque l'utilisateur clique sur le bouton requis à l'aide de la création du bouton, en obtenant son identifiant et en déclenchant l'événement de clic, cette méthode peut être implémentée.
Pour plus de précisions, nous devons passer par l’exemple donné ci-dessous :
Exemple:
Dans l'exemple donné ci-dessous avec avoir 'Cliquez ici' , un bouton sera créé avec l'identifiant et avec l'événement click pour accéder à l'événement click dessus ;
Click here
En précisant son identifiant en javascript, il faut accéder au bouton créé dans la méthode document.getElementById. Pour effectuer l'opération suivante, l'événement click sera invoqué.
const get= document.getElementById('btn'); get.click();
Enfin, lorsque l'on clique sur le bouton, nous définirons l'impression de la fonction suivante nommée 'cliquez sur Événement()' d'une manière que sur la console en utilisant la méthode du clic.
function clickEvent() { console.log('now the Click Event is triggered ') } À partir de la sortie ci-dessus du code respectif, en utilisant la méthode click de manière automatisée, nous avons observé que le bouton cliquer ici est cliqué.
Méthode 2 :
Déclenchez un événement de clic en javascript à l'aide des méthodes addEventListener() et dispatchEvent()
En javascript, il s'agit de la méthode intégrale fournie par l'interface cible de l'événement javascript.
Un écouteur d'événement est enregistré par cette méthode. Nous appellerons notre fonction configurée lorsque l'événement mentionné sera capturé sur la cible.
Syntaxe de l'événement :
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
description de la syntaxe :
- Dans la syntaxe ci-dessus, il existe un paramètre appelé $type , qui est un paramètre obligatoire. Indiquant le type d'événement à surveiller, les paramètres n'acceptent qu'une seule chaîne. Ce paramètre est un paramètre sensible à la casse. Divers événements sont pris en charge par celui-ci, tels que le clavier, le clic, la base de données, la saisie, etc.
- De la même manière, le $auditeur est également un paramètre obligatoire. Une notification concernant l'événement est reçue par ce paramètre en tant qu'objet lorsqu'un événement du type mentionné s'est produit. Sur la fonction javascript ou sur une interface Eventlistner, cet objet doit être implémenté.
- D'un autre côté, le $option est un paramètre facultatif dedans.
Exemple 1
Open bing const link = document.getElementById('btn'); link.addEventListener('click', e => {}); for(let i = 0; i <5; i++) { link.dispatchevent(new event('click')); } function opengooglebymethod() console.log('the required event is triggered') < pre> <p> <strong>Output:</strong> </p> <pre> 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. </pre> <p> <strong>Example 2:</strong> </p> <p>In this example, first of all, we will include a button with a corresponding id with an onclick event along with a value as same as like previous one.</p> <pre> Click here </pre> <p>After that, with the help of the <strong> <em>addEventListener()</em> </strong> method, we will retrieve the button and click the event in it to specify the <strong> <em>'e'</em> </strong> in its argument, which refers to the event click object.</p> <pre> const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); </pre> <p>Finally, as same as the previous method, we will define the click event to display the corresponding message in it at the time the click event is triggered.</p> <pre> function clickEvent() { console.log('The required event is triggered ') } </pre> <hr></5;> Exemple 2 :
Dans cet exemple, nous inclurons tout d'abord un bouton avec un identifiant correspondant avec un événement onclick ainsi qu'une valeur identique à la précédente.
Click here
Après cela, avec l'aide du addEventListener() méthode, nous allons récupérer le bouton et cliquer sur l'événement qu'il contient pour spécifier le 'C'est' dans son argument, qui fait référence à l'objet clic d'événement.
constructeur en java
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); Enfin, comme pour la méthode précédente, nous définirons l'événement click pour y afficher le message correspondant au moment où l'événement click est déclenché.
function clickEvent() { console.log('The required event is triggered ') }