Wie simuliert man einen Klick mit JavaScript?
Folgende Ansätze können umgesetzt werden, um eine Klicksimulation in JavaScript anzuwenden:
Ansatz 1: Simulieren Sie einen Klick mit JavaScript mithilfe des onclick-Ereignisses
Ein ' anklicken ” Ereignis tritt auf, wenn die Taste gedrückt wird. Dieser Ansatz kann angewendet werden, um eine Funktion beim Klicken auf die Schaltfläche aufzurufen und die „ Klickzahl “ jedes Mal, wenn auf die Schaltfläche geklickt wird.
Randnotiz: Ein ' anklicken ”-Ereignis kann einfach angewendet werden, indem es mit einer bestimmten Funktion verknüpft wird.
Beispiel
Gehen Sie das folgende Code-Snippet durch:
< Center >
< h3-Stil = 'Hintergrundfarbe: hellblau;' > Klicken Sie auf Simuliert < Spanne Klasse = 'zählen' > Spanne > mal h3 >
< Schaltflächen-ID = 'btn1' anklicken = 'countClick()' > Klick mich ! Taste >
Center >
- Fügen Sie die angegebene Überschrift zusammen mit einem „ ”-Tag zum Erhöhen des „ zählen ” von Klicks.
- Erstellen Sie im nächsten Schritt einen Button mit angehängtem „ anklicken ” Ereignis, das zur Funktion countClick() umleitet, auf die beim Klicken auf die Schaltfläche zugegriffen wird.
Gehen wir nun die folgenden JavaScript-Codezeilen durch:
< Skript >
Klicks lassen = 0 ;
Funktion countClick ( ) {
Klicks = Klicks + 1 ;
dokumentieren. querySelector ( '.zählen' ) . Textinhalt = Klicks ;
}
Skript >
Im obigen js-Teil des Codes:
- Initialisieren Sie hier zunächst die Klicks mit „ 0 “.
- Deklarieren Sie danach eine Funktion mit dem Namen „ countClick() “. Erhöhen Sie in seiner Definition das initialisierte „ Klicks ' mit ' 1 “. Dies führt dazu, dass der Zähler jedes Mal erhöht wird, wenn auf die Schaltfläche geklickt wird.
- Greifen Sie zuletzt auf die „ Spanne ”-Element mit dem “ document.querySelector() ' Methode. Wenden Sie auch das „ Textinhalt ”-Eigenschaft, um die zuvor besprochene erhöhte Klickanzahl dem span-Element zuzuweisen.
Die Ausgabe wird wie folgt sein:
Die Funktionalität des inkrementierten Timers bei jedem Klick kann in der obigen Ausgabe beobachtet werden.
Ansatz 2: Simulieren Sie einen Klick mit JavaScript über die Methode addEventListener()
Das ' addEventListener() ”-Methode weist einem Element einen Event-Handler zu. Diese Methode kann implementiert werden, indem ein bestimmtes Ereignis an ein Element angehängt wird und der Benutzer beim Auslösen des Ereignisses benachrichtigt wird.
Syntax
Element. addEventListener ( Ereignis, Funktion )In der angegebenen Syntax:
- „ Veranstaltung “ bezieht sich auf den Veranstaltungsnamen.
- „ Funktion “ zeigt auf die Funktion, die ausgeführt werden soll, wenn das Ereignis eintritt.
Beispiel
Die unten gegebene Demonstration erklärt das angegebene Konzept:
< Center >< Karosserie >< ein href = '#' Ich würde = 'Verknüpfung' > Klicken Sie auf den Link a >
Karosserie > Center >
< Skript >
Ziege sein = dokumentieren. getElementById ( 'Verknüpfung' ) ;
erhalten. addEventListener ( 'klicken' , ( ) => Alarm ( 'Klicken Sie auf Simuliert!' ) )
Skript >
Im obigen Code:
- Geben Sie zunächst ein „ Anker ”-Tag, um den angegebenen Link einzuschließen
- Rufen Sie im JavaScript-Teil des Codes den erstellten Link mit dem „ document.getElementById() ' Methode.
- Wenden Sie abschließend das „ addEventListener() ” Methode zum aufgerufenen “ Verknüpfung “. Das ' klicken “-Ereignis wird in diesem Fall angehängt, was dazu führt, dass der Benutzer benachrichtigt wird, wenn er auf den erstellten Link klickt.
Ausgabe
Ansatz 3: Simulieren Sie einen Klick mit JavaScript mithilfe der click()-Methode
Das ' klicken() ”-Methode führt eine Mausklick-Simulation auf einem Element durch. Diese Methode kann verwendet werden, um einen Klick direkt auf die angeschlossenen Schaltflächen zu simulieren, wie der Name angibt.
Syntax
Element. klicken ( )In der angegebenen Syntax:
- „ Element “ zeigt auf das Element, auf dem der Klick ausgeführt wird.
Beispiel
Das folgende Code-Snippet erklärt das genannte Konzept:
< Center >< Karosserie >< h3 > Hast du gefunden Dies Seite hilfreich ? h3 >
< Schaltfläche anklicken = 'simulateClick()' Ich würde = 'simulieren' > Ja Taste >
< Schaltfläche anklicken = 'simulateClick()' Ich würde = 'simulieren' > Nö Taste >
< h3-ID = 'Kopf' Stil = 'Hintergrundfarbe: hellgrün;' > h3 >
Karosserie > Center >
- Fügen Sie zunächst die angegebene Überschrift in das „
' Schild. - Erstellen Sie danach zwei verschiedene Schaltflächen mit den angegebenen IDs.
- Fügen Sie außerdem ein „ anklicken “-Ereignis, wobei beide die Funktion „simulateClick()“ aufrufen.
- Fügen Sie im nächsten Schritt eine weitere Überschrift mit dem angegebenen „ Ich würde “, um den Benutzer zu benachrichtigen, sobald die „ klicken “ wird simuliert.
Gehen Sie nun die unten angegebenen JavaScript-Zeilen durch:
< Skript >Funktion SimulierenKlick ( ) {
dokumentieren. getElementById ( 'simulieren' ) . klicken ( )
bekommen lassen = dokumentieren. getElementById ( 'Kopf' )
erhalten. innerText = 'Klick simuliert!'
}
Skript >
- Definiere eine Funktion “ simulierenKlick() “.
- Greifen Sie hier auf die erstellten Schaltflächen mit dem „ document.getElementById() “-Methode und wenden Sie die „ klicken() ” Methode zu ihnen.
- Greifen Sie nun in ähnlicher Weise auf die zugewiesene Überschrift zu und wenden Sie das „ innerText ”-Eigenschaft, um die angegebene Nachricht als Überschrift beim simulierten Klicken anzuzeigen.
Ausgabe
In der obigen Ausgabe ist ersichtlich, dass beide erstellten Schaltflächen den Klick simulieren.
Dieser Blog demonstriert, wie man eine Klicksimulation mit JavaScript anwendet.
Fazit
Ein ' anklicken ” Veranstaltung, die “ addEventListener() “-Methode oder die „ klicken() “-Methode kann verwendet werden, um einen Klick mit JavaScript zu simulieren. Ein ' anklicken ”-Ereignis kann angewendet werden, um jedes Mal, wenn auf die Schaltfläche geklickt wird, einen Klick in Form eines Zählers zu simulieren. Das ' addEventListener() “-Methode kann verwendet werden, um ein Ereignis an den Link anzuhängen und den Benutzer über die Klicksimulation zu benachrichtigen. Das ' klicken() “-Methode kann auf die erstellten Schaltflächen angewendet werden und führt die erforderliche Funktionalität für jede der Schaltflächen aus. Dieser Artikel erklärt, wie man eine Klicksimulation in JavaScript anwendet.