JavaScript onClick Event

Das Event onClick wird ausgelöst, wenn der Benutzer mit der Maus auf ein HTML-Element klickt. Es kann dazu verwendet werden, mit beliebig komplexen Aktionen unter Verwendung von JavaScript-Code auf das Anklicken zu reagieren. Dies geschieht mit Hilfe eines Event-Handlers, einer speziellen Funktion, welche die in diesem Fall gewünschten Aktionen durchführt.

In einem Event-Handler erhält man Zugriff auf das JavaScript-Objekt Event. Dieses Objekt beinhaltet, neben Informationen darüber um welches Event es sich handelt, auch Angaben zur Position des Auftretens und genaue Angaben zu der gedrückten Taste bzw. der jeweils gedrückten Maustaste. Normalerweise werden Events bei aktiven Komponenten, wie beispielsweise Links oder Eingabeelementen, überwacht. Darüber hinaus ist es aber auch möglich Events auf Elementen, wie P-Tags oder anderen ausschliesslich zur Ausgabe bestimmten Elementen zu überwachen und entsprechend auf diese Aktionen zu reagieren.

JavaScript onClick Beispiel

Folgendes Script demonstriert, auf welche Weise das JavaScript-Event onClick verwendet werden kann. Für den unten definierten Link wird, statt eines Verweises (href-Attribut des A-Tags), das Event onClick mit einer entsprechenden Aktion belegt. Als Reaktion auf das Anklicken mit der Maus wird die Methode alert() aufgerufen, die als Parameter eine Zeichenkette erwartet. Diese Zeichenkette wird durch alert in einer Dialog-Box ausgegeben. Die Methode alert gehört zum JavaScript-Objekt Window.

Für das auf den Link folgende HTML-Element SPAN wird ebenfalls das Event onClick überwacht. Hier wird, als Reaktion auf das Anklicken des SPAN-Elements, mittels Style-Objekt die Textfarbe des Elements geändert. Dabei wird das SPAN-Element über das this-Objekt addressiert. Das this-Objekt ist nichts anderes, als ein Verweis eines Objektes auf sich selbst. Innerhalb von Event-Handlern speichert das Objekt this stets einen Verweis zum Element, auf dem das Event aufgetreten ist. Im Beispiel unten wird dieser Umstand ausgenutzt, um die Textfarbe auf den Wert "green" zu setzen.

<a onclick="alert('onClick auf dem Link aufgetreten!')" title="">Bitte anklicken</a><br />
<span onclick="this.style.color='green'">Bitte anklicken, um die Textfarbe zu &auml;ndern</span>

Bitte anklicken
Bitte anklicken, um die Textfarbe zu ändern

PopUp-Fenster automatisch nach Auftreten des JavaScript onClick-Event öffnen

Im nun folgenden Beispielscript wird das JavaScript onClick Event dazu verwendet, nach dem Auftreten des Events onClick ein PopUp zu öffnen. Dazu wird eine Event-Handler-Funktion mit dem HTML-Element verbunden, welches das onClick-Event verarbeiten soll.

<span id="onclick-popup">Inhalt, damit aus was zum Anklicken da ist</span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Folgender Event-Handler öffnet ein PopUp-Fenster
function open_popup () {
  window.open ('http://www.evocomp.de', 'onClick PopUp Fenster', 'top=100,left=330,height=400,width=590');
}

// JavaScript onClick-Event mit dem zuvor definierten Event-Handler
// verbinden. Öffnet automatsch nach Auftreten des Events onClick ein PopUp.
document.getElementById ('onclick-popup').onclick = open_popup;
// -->
</script>

Inhalt, damit aus was zum Anklicken da ist