Déclencher un événement de clic en JavaScript

1. Déclencher un événement de clic en JavaScript à l’aide de click()
2. Déclencher un événement de clic en JavaScript à l’aide de addEventListener()

L’objet window est l’un des objets les plus importants utilisés pour communiquer avec le navigateur. Il représente la fenêtre du navigateur. Toutes les variables et fonctions globales deviennent membres de l’objet window. L’objet Window-Location est utilisé pour obtenir l’URL de la page actuelle et également pour modifier l’URL de la redirection.

L’article d’aujourd’hui montre comment déclencher un événement de clic en JavaScript.

Déclencher un événement de clic en JavaScript à l’aide de click()

Il s’agit d’un événement intégré fourni par JavaScript. Un élément reçoit l’événement click lorsqu’il est pressé, et une touche est relâchée sur le dispositif de pointage (par exemple, le bouton gauche de la souris) pendant que le pointeur se trouve dans l’élément.

click() est déclenché après que les événements bas et haut de la souris ont été déclenchés dans cet ordre. Vous trouverez de plus amples informations sur la fonction click dans la documentation de la méthode click().

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

const link = document.getElementById('btn');
for (let i = 0; i < 5; i++) {
  link.click();
}
function openGoogleByMethod() {
  console.log('Event triggered')
}

Nous extrayons l’élément à l’aide de l’ID d’élément dans l’exemple ci-dessus et appliquons l’événement Click à un élément. Si vous souhaitez exécuter un événement de clic automatisé plus d’une fois, vous pouvez écrire la boucle for et appeler target.click() à l’intérieur de la boucle for. Il invoque automatiquement le clic du bouton jusqu’à ce que le compteur atteigne sa valeur maximale et émet 5 fois Triggered event.

Production :

"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"

Déclencher un événement de clic en JavaScript à l’aide de addEventListener()

Il s’agit d’une méthode intégrale fournie par l’interface cible JavaScript Event. Cette méthode enregistre un écouteur d’événement. Chaque fois que l’événement spécifié est intercepté sur la cible, notre fonction configurée est appelée.

Syntaxe

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);

• $type est un paramètre obligatoire qui n’accepte qu’une chaîne indiquant le type d’événement à surveiller. C’est un paramètre sensible à la casse. Il prend en charge divers événements comme click, keyboard, input, database, etc. $listener est un paramètre obligatoire. Lorsqu’un événement du type spécifié se produit, ce paramètre en tant qu’objet reçoit une notification à ce sujet. Cet objet doit implémenter l’interface EventListener ou une fonction JavaScript.
• $options est un paramètre optionnel. Ce paramètre spécifie les propriétés de l’écouteur d’événement. Certaines propriétés sont capture, once, passive, et signal. $useCapture ​​est un paramètre optionnel. Ce paramètre accepte les valeurs booléennes. Les événements de ce type seront d’abord envoyés à un EventTarget au bas de l’arborescence DOM ou non seront décidés par cette valeur booléenne. Si vrai, cet événement est d’abord envoyé à l’écouteur enregistré, puis à EventTarget.

Vous trouverez de plus amples informations sur la fonction addEventListener dans la documentation de la méthode addEventListener().

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

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('Event triggered')
}

Dans l’exemple ci-dessus, nous extrayons l’élément à l’aide de l’ID d’élément et ajoutons un listeur pour l’événement Click sur un élément. Si vous souhaitez exécuter un événement de clic automatisé plus d’une fois, vous pouvez taper for loop et entrer la méthode target.DispatchEvent (new Event('click')) dans la boucle for. dispatchEvent est la méthode EventTarget qui distribue l’objet événement suivi de l’écouteur d’événement. Cela enverra automatiquement l’événement de clic de bouton jusqu’à ce que le compteur atteigne sa valeur maximale et imprime 5 fois Triggered Event.

Production :

"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"