Die onclick Methode gibt den click-Eventhandler des Elementes zurück.
Note: Wenn man das
click-Event zum auslösen einer Aktion benutzt, kann man auch in Erwägung ziehen das man die selbe Aktion auf das keydown-Event legt, das erlaubt den Nutzern ohne Maus oder Touchscreen die Aktion trotzdem auszuführen.Syntax
element.onclick = function;
Anstelle von function wird der Methodenname eingetragen, der meistens etwas mit der Funktion der Methode zu tun hat. Siehe "JavaScript Guide:Functions".
Das Eventobject besteht aus der spezielen Eventhandlermethode die ein MouseEvent ist.
Beispiel
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>onclick Event Beispiel</title>
<script>
function initElement() {
var p = document.getElementById("foo");
// BEACHTE: showAlert(); oder showAlert(param); wird NICHT funktionieren.
// Es muss ein Methodenname und NICHT ein Methodenaufruf sein.
p.onclick = showAlert;
};
function showAlert() {
alert("onclick Event erkannt!")
}
</script>
<style>
#foo {
border: solid blue 2px;
}
</style>
</head>
<body onload="initElement();">
<span id="foo">Mein Eventelement</span>
<p>Klicke auf das obenstehende Element</p>
</body>
</html>
Oder man benutzt eine anonyme Methode, wie hier:
p.onclick = function() { alert("onclick Event erkannt!"); };
Bemerkungen
Dieses Event wird ausgefürt wenn der Benutzer auf das Element klickt. Dieses Event wird nach dem Mousedown- und dem Mouseupevent ausgefürt.
Nur ein Klickhandler kann zu einem Objekt hinzugefügt werden in dieser Variable gespeichert werden. Man kann auch die EventTarget.addEventListener() Methode benutzen, seit es flexibel ist und teil der DOM Evente Spezifikation.
Spezifikation
| Spezifikation | Status | Kommentar |
|---|---|---|
| WHATWG HTML Living Standard Die Definition von 'onclick' in dieser Spezifikation. |
Lebender Standard | --- |
Schlagwörter des Dokuments und Mitwirkende
Schlagwörter:
Mitwirkende an dieser Seite:
patrickGold,
MrTroble
Zuletzt aktualisiert von:
patrickGold,