JavaScript/DOM/Event/click

Der onclick-Event-Handler löst beim Anklicken Ereignisse aus.

bubbles	ja
cancelable	ja
mögliche Auslöser	allen Elementen außer im head
Event-Objekt	Event

Beispiel ansehen …

<p id="Absatz"></p>
<button id="Eingabe">Los!</button>

<script>

  var elem = document.getElementById('Eingabe');
  elem.addEventListener('click', erzeugeZeitStempel);
 
  function erzeugeZeitStempel() {
    var Zeitstempeltext = document.createTextNode(document.lastModified);
    var TextZuvor = document.createTextNode('Datum des letzten Updates: ');
    document.getElementById('Absatz').appendChild(TextZuvor);
    document.getElementById('Absatz').appendChild(Zeitstempeltext);
  }
</script>

Das JavaScript hängt mit addEventListener einen click-Event-Handler an den Button.
Durch einen Klick auf den Button wird daraufhin der Zeitpunkt der letzten Änderung am Dokument in den Absatz mit der id="Absatz" geschrieben.

Beachten Sie:

• Das click Event wird ausgelöst, wenn ein Benutzer die Maustaste in einem Element drückt und im gleichen Element wieder loslässt. Mit click reagiert das Programm also erst beim Loslassen der Maustaste. Um auf das Drücken der Maustaste zu reagieren, benötigen Sie das mousedown oder pointerdown Event.
• Die Folge davon ist: wenn ein Benutzer die Maustaste auf einem Element herunterdrückt und die Maus dann aus dem Element herauszieht, entsteht kein click Event.
• Bei Touchgeräten wird der click simuliert, was zu einer kleinen Verzögerung führt. Sie können dies vermeiden, wenn Sie neben dem click- auch den touchstart-Eventhandler abfragen.
• Die Eigenschaft detail des Eventobjekts zählt die Klicks und setzt diesen Wert nach einer vom System abhängigen Zeit zurück. So kann z. B. geprüft werden, ob ein Doppelklick das Event zum zweiten Mal ausgelöst hat.

Weblinks

• WHATWG: onclick
• MDN: Globaler Eventhandler onclick