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

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert auer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser fr Audio-Spuren in eine Html-Webseite einfgen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

berbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein ber belnd effect jedoch wrde ich diesen gerne einfgen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank fr das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. Mrz 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht