Globaler Eventhandler onclick

 

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,