Der onclick Das Ereignis tritt im Allgemeinen auf, wenn der Benutzer auf ein Element klickt. Es ermöglicht dem Programmierer, eine JavaScript-Funktion auszuführen, wenn auf ein Element geklickt wird. Dieses Ereignis kann zur Validierung eines Formulars, für Warnmeldungen und vieles mehr verwendet werden.
Mithilfe von JavaScript kann dieses Ereignis dynamisch zu jedem Element hinzugefügt werden. Es unterstützt alle HTML-Elemente außer , , , , , , , ,
, , Und . Das bedeutet, dass wir das nicht anwenden können onclick Ereignis für die angegebenen Tags.
In HTML können wir das verwenden onclick Attribut und weisen Sie ein zu JavaScript-Funktion dazu. Wir können auch JavaScripts verwenden addEventListener() Methode und übergeben Sie a klicken Ereignis hinzufügen, um die Flexibilität zu erhöhen.
df.loc
Syntax
Jetzt sehen wir die Syntax der Verwendung von onclick Ereignis in HTML und in Javascript (ohne addEventListener() Methode oder unter Verwendung der addEventListener() Methode).
In HTML
In JavaScript
object.onclick = function() { myScript }; In JavaScript mithilfe der Methode addEventListener()
object.addEventListener('click', myScript);
Mal sehen, wie man es benutzt onclick Veranstaltung anhand einiger Illustrationen. Nun sehen wir uns die Beispiele für die Verwendung an onclick Ereignis in HTML und in JavaScript.
Beispiel 1 – Verwendung des onclick-Attributs in HTML
In diesem Beispiel verwenden wir die HTML onclick Attribut und weisen ihm eine JavaScript-Funktion zu. Wenn der Benutzer auf die angegebene Schaltfläche klickt, wird die entsprechende Funktion ausgeführt und ein Warndialogfeld wird auf dem Bildschirm angezeigt.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me Testen Sie es jetzt Ausgabe
Nachdem Sie auf die angegebene Schaltfläche geklickt haben, lautet die Ausgabe:
Beispiel 2 – Verwendung von JavaScript
In diesem Beispiel verwenden wir JavaScripts onclick Ereignis. Hier verwenden wir die onclick Ereignis mit dem Absatzelement.
Wenn der Benutzer auf das Absatzelement klickt, wird die entsprechende Funktion ausgeführt und der Text des Absatzes geändert. Beim Klicken auf Palindrom in Java
Element ändern sich auch die Hintergrundfarbe, die Größe, der Rahmen und die Farbe des Textes.
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Testen Sie es jetzt Ausgabe
Lokaldatum Java
Nachdem Sie auf den Text geklickt haben Klick mich, Die Ausgabe wird sein:
Beispiel 3 – Verwendung der Methode addEventListener()
In diesem Beispiel verwenden wir JavaScripts addEventListener() Methode zum Anhängen eines klicken Ereignis zum Absatzelement. Wenn der Benutzer auf das Absatzelement klickt, wird der Text des Absatzes geändert.
Wenn Sie auf den Absatz klicken, ändern sich auch die Hintergrundfarbe und die Schriftgröße der Elemente.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Testen Sie es jetzt Ausgabe
Beim Klicken auf den Text Klick mich , die Ausgabe wird sein -
