onclick- Ereignis
Beispiel
Führen Sie ein JavaScript aus, wenn auf eine Schaltfläche geklickt wird:
<button onclick="myFunction()">Click me</button>
Definition und Verwendung
Das onclickEreignis tritt auf, wenn der Benutzer auf ein Element klickt.
Im HTML-Format:
<element onclick="myScript">
In JavaScript:
object.onclick = function(){myScript};
Verwenden Sie in JavaScript die Methode addEventListener():
object.addEventListener("click", myScript);
Technische Details
| Bläschen: | ja |
|---|---|
| kündbar: | ja |
| Ereignistyp: | MouseEvent |
| Unterstützte HTML-Tags: |
Alle außer: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title> |
Mehr Beispiele
Klicken Sie auf eine <Schaltfläche>, um das Datum anzuzeigen:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Klicken Sie auf ein <h3>-Element, um die Textfarbe zu ändern:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Ein weiteres Beispiel zum Ändern der Farbe eines Elements:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Klicken Sie hier, um Text von einem Eingabefeld in ein anderes zu kopieren:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
So weisen Sie dem Fensterobjekt ein "onclick"-Ereignis zu:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Verwenden Sie onclick, um ein Dropdown-Menü zu erstellen:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Verwandte Seiten
JavaScript-Tutorial: JavaScript-Ereignisse
HTML-DOM-Referenz: ondblclick-Ereignis
HTML-DOM-Referenz: onmousedown-Ereignis
HTML-DOM-Referenz: onmouseup-Ereignis
Browser-Unterstützung
onclick ist eine Funktion von DOM Level 2 (2001).
Es wird in allen Browsern vollständig unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |