Klickereignis in JavaScript auslösen

1. Click-Event in JavaScript mit click() auslösen
2. Click-Event in JavaScript mit addEventListener() auslösen

Das Fensterobjekt ist eines der wichtigsten Objekte zur Kommunikation mit dem Browser. Es repräsentiert das Fenster des Browsers. Alle globalen Variablen und Funktionen werden Mitglieder des Fensterobjekts. Das Window-Location-Objekt wird verwendet, um die URL der aktuellen Seite abzurufen und auch die URL für die Weiterleitung zu ändern.

Der heutige Artikel zeigt, wie man ein Click-Event in JavaScript auslöst.

Click-Event in JavaScript mit click() auslösen

Dies ist ein integriertes Ereignis, das von JavaScript bereitgestellt wird. Ein Element empfängt das Click-Ereignis, wenn es gedrückt wird, und eine Taste auf dem Zeigegerät (z. B. die linke Maustaste) wird losgelassen, während sich der Zeiger innerhalb des Elements befindet.

click() wird ausgelöst, nachdem die Down- und Up-Mausereignisse in dieser Reihenfolge ausgelöst wurden. Weitere Informationen zur click-Funktion finden Sie in der Dokumentation zur Methode 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')
}

Wir extrahieren das Element mithilfe der Element-ID im obigen Beispiel und wenden das Click-Ereignis auf ein Element an. Wenn Sie ein automatisiertes Click-Event mehr als einmal ausführen möchten, können Sie die for-Schleife schreiben und innerhalb der for-Schleife target.click() aufrufen. Es ruft automatisch den Klick auf die Schaltfläche auf, bis der Zähler seinen Maximalwert erreicht, und gibt das Triggered event 5 Mal aus.

Ausgabe:

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

Click-Event in JavaScript mit addEventListener() auslösen

Dies ist eine integrale Methode, die von der Zielschnittstelle des JavaScript-Ereignisses bereitgestellt wird. Diese Methode registriert einen Ereignis-Listener. Immer wenn das angegebene Ereignis auf dem Ziel abgefangen wird, wird unsere konfigurierte Funktion aufgerufen.

Syntax

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

• $type ist ein obligatorischer Parameter, der nur eine Zeichenfolge akzeptiert, die den Typ des zu überwachenden Ereignisses angibt. Es ist ein Parameter, bei dem zwischen Groß- und Kleinschreibung unterschieden wird. Es unterstützt verschiedene Ereignisse wie click, keyboard, input, database, etc. $listener ist ein obligatorischer Parameter. Wenn ein Ereignis des angegebenen Typs eintritt, erhält dieser Parameter als Objekt eine Benachrichtigung darüber. Dieses Objekt muss die EventListener-Schnittstelle oder eine JavaScript-Funktion implementieren.
• $options ist ein optionaler Parameter. Dieser Parameter gibt die Eigenschaften des Ereignis-Listeners an. Einige Eigenschaften sind capture, once, passive und signal. $useCapture ist ein optionaler Parameter. Dieser Parameter akzeptiert boolesche Werte. Ereignisse dieses Typs werden zuerst an ein EventTarget am Ende des DOM-Baums gesendet oder nicht, wird durch diesen booleschen Wert entschieden. Wenn wahr, wird dieses Ereignis zuerst an den registrierten Listener und dann an EventTarget gesendet.

Weitere Informationen zur Funktion addEventListener finden Sie in der Dokumentation zur Methode 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')
}

Im obigen Beispiel extrahieren wir das Element mithilfe der Element-ID und fügen einen Lister für das Click-Ereignis auf einem Element hinzu. Wenn Sie ein automatisiertes Klickereignis mehr als einmal ausführen möchten, können Sie eine for-Schleife eingeben und die Methode target.DispatchEvent (new Event('click')) innerhalb der for-Schleife eingeben. dispatchEvent ist die EventTarget-Methode, die das Event-Objekt versendet, gefolgt vom Event-Listener. Dadurch wird automatisch das Schaltflächenklick-Ereignis gesendet, bis der Zähler seinen Höchstwert erreicht, und das Triggered Event 5 Mal gedruckt.

Ausgabe:

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