In diesem Tutorial wird das Verfahren zum Festlegen von onClick mit JavaScript definiert.
So stellen Sie onClick mit JavaScript ein
Zum Einstellen der anklicken Bei JavaScript gibt es zwei verschiedene Methoden, nämlich:
- Die erste Methode besteht darin, dem HTML-Element einen Wert zuzuweisen anklicken Attribut mit JavaScript.
- Die zweite Methode besteht darin, dem HTML-Ereignis explizit einen Ereignis-Listener hinzuzufügen, der nach dem „ klicken ' Veranstaltung.
Beispiel 1: Weisen Sie dem onclick-Attribut des HTML-Elements mithilfe von JavaScript einen Wert zu
Erstellen Sie in der HTML-Datei eine Überschrift und eine Schaltfläche „ Klick mich „mit der ID“ js “, der beim Anklicken die JavaScript-Funktion auslöst.
< h2 > Satz onClick-Eigenschaft Mit JavaScript h2 >
< Schaltflächen-ID = 'js' > Klick mich Taste >
Im folgenden Schritt wird auf die erstellte Schaltfläche zugegriffen und ein „ anklicken ”-Attribut wird daran angehängt. Beim Klick auf die Schaltfläche wird die angegebene Funktion ausgeführt und das „ style.backgroundColor ”-Eigenschaft ändert die Schaltflächenfarbe wie folgt:
dokumentieren. getElementById ( 'js' ) . anklicken = Funktion jsFunc ( ) {
dokumentieren. getElementById ( 'js' ) . Stil . Hintergrundfarbe = 'Violett' ;
}
Die entsprechende Ausgabe lautet:
Beispiel 2: Fügen Sie dem HTML-Ereignis explizit einen Ereignis-Listener hinzu
Erstellen Sie eine Schaltfläche “ Klick hier! “ und weist eine ID zu “ Veranstaltung ” dazu, das die Methode addEventListener() auf der auslöst 'klicken' Veranstaltung:
< Schaltflächen-ID = 'Veranstaltung' > Klick hier ! stark > Taste stark >>
Rufen Sie die Schaltfläche mit seiner ab Ich würde und fügen Sie dann ein „ addEventListener() ” Methode durch Übergeben eines “ klicken „Ereignis und eine Funktion“ eventFunk ” wobei die Hintergrundfarbe der Schaltfläche geändert wird:
dokumentieren. getElementById ( 'Veranstaltung' ) . addEventListener ( 'klicken' , eventFunc ) ;Funktion eventFunc ( ) {
dokumentieren. getElementById ( 'Veranstaltung' ) . Stil . Hintergrundfarbe = 'Grün' ;
}
Ausgabe
Beispiel 3: Alle onClick-Methoden gleichzeitig verwenden
In diesem Beispiel wird die Funktionsweise aller Methoden gleichzeitig angezeigt. Die erste ist die Standardmethode zum Hinzufügen des onclick-Attributs innerhalb des HTML-Tags selbst. Danach wurden auch die beiden Methoden zum Setzen des onclick-Attributs mit Hilfe von JavaScript demonstriert.
Erstellen Sie im folgenden Beispiel drei Schaltflächen und sehen Sie sich die Funktionalität des onclick-Attributs an.
- Der erste Knopf „ Klicken “ ruft die „ htmlFunc() “ auf das Klickereignis.
- Die Taste ' Klick mich “ wird mit der zugewiesenen ID zugegriffen “ js “ und weisen Sie dann dem onclick-Attribut der Schaltfläche mithilfe von JavaScript einen Wert zu.
- Die Taste ' Klick hier! ” wird mit der id zugegriffen “ Veranstaltung “ und fügen Sie dann ein „ addEventListener() ” Methode damit:
< Schaltflächen-ID = 'js' > Klick mich Taste >< Br >< Br >
< Schaltflächen-ID = 'Veranstaltung' > Klick hier ! Taste >
Die folgende Funktion löst das „ anklicken „Ereignis der Schaltfläche“ Klicken “:
Funktion htmlFunc ( ) {Alarm ( 'Die Schaltfläche, auf die das HTML-onClick-Ereignis geklickt hat' ) ;
}
Beim Anklicken des „ Klick mich “ drücken, wird die folgende Funktion ausgelöst, bei der eine Warnmeldung angezeigt wird.
dokumentieren. getElementById ( 'js' ) . anklicken = Funktion jsFunc ( ) {Alarm ( 'Die Schaltfläche, die von der JavaScript-onClick-Funktion angeklickt wurde' ) ;
}
Die angegebene Funktion löst die Schaltfläche „ Klick hier! “:
dokumentieren. getElementById ( 'Veranstaltung' ) . addEventListener ( 'klicken' , eventFunc ) ;Funktion eventFunc ( ) {
Alarm ( 'Die Schaltfläche, die von JavaScript onClick mit der EventListener-Methode angeklickt wurde' ) ;
}
Die Ausgabe zeigt bei jedem Klick auf eine Schaltfläche Warnmeldungen an:
Fazit
Um den Onclick mit JavaScript festzulegen, gibt es zwei verschiedene Ansätze, der erste besteht darin, dem onclick-Attribut des HTML-Elements mithilfe von JavaScript einen Wert zuzuweisen, und der zweite Ansatz besteht darin, explizit einen Ereignis-Listener für das HTML-Ereignis hinzuzufügen, der nach dem „ klicken ' Veranstaltung. In diesem Tutorial wurden die Methoden zum Festlegen von onClick mit JavaScript zusammen mit Beispielen definiert.