JavaScript Events triggern und Funktionen starten

Wir kennen bei der alten Form JavaScript in HTML zu integrieren die folgende Variante, dass wir direkt bei unserem HTML-Anweisung als Attribut onclick hinzufügen.

In allen folgenden Beispielen lassen wir einfach über die JavaScript-Anweisung alert immer eine Ausgabe ausgeben. Dies kann man natürlich an seine späteren Gegebenheiten anpassen. Hier jetzt der einfachhalber und vor allem zum schnellen vergleichen der Vorgehensweise diese Art.

Wir erstellen einen Bereich, den wir mit der Maus anklicken können und dann die Ausgabe erfolgt:

<div onclick="alert('Ausgabe durch onclick')">bitte anklicken</div>

Einfach einmal anklicken.

Nachteil dieser Art ist, dass wir nun wieder HTML mit JavaScript kunterbunt mischen und dies weder besonders schön noch besonders gut zum Pflegen ist.

Daher wollen wir wie schon bei HTML und CSS eine saubere Trennung. Perfekt und später bei Anwendungen werden wir natürlich unsere JavaScript-Befehle in eine externe Datei auslagern und diese über den <head>-Bereich der HTML-Datei zuladen. Im Folgenden zum Lernen haben wir einfach (und der Übersichtshalber) einen <script>-Bereich.

Um nun unsere HTML-Anweisung ansprechbar zu machen, gibt es drei Möglichkeiten:

  • über eine ID
  • über eine Klasse
  • über den HTML-Befehl selber

Wir ergänzen also unseren bisherigen HTML-Befehl um eine ID und eine Klasse und werfen das Attribut onclick raus.

<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>

JavaScript Events triggern über ID

Nun erweitern wir unsere HTML-Datei um einen <script>-Bereich

<script>
alert('Ausgabe über JavaScript');
</script>
<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>

Nun wird beim Ausführen im Browser immer die alert-Anweisung ausgeführt.

Um jetzt Probleme zu vermeiden, sollte unsere JavaScript-Befehle erst ausgeführt werden, wenn das komplette HTML-Dokument geladen wurde. Ansonsten kann schnell das Problem aufkommen, dass eine JavaScript-Anweisung auf noch nicht geladenes HTML-Element zugreifen möchte und dann natürlich mit Fehlern um sich wirft.

Daher packen wir unsere JavaScript-Anweisungen in die Funktion window.onload

<script>
window.onload = function() {
    alert('Ausgabe über JavaScript');
}
</script>
<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>

Das ist die selber Art, wie man es von jQuery kennt - schlicht und ergreifend um dasselbe Problem zu vermeiden.

Noch sind wir noch keinen Schritt weiter außer, dass wir zukünftige Fehler vermieden haben. Wir wollen ja, dass die Ausgabe erst erscheint, wenn jemand auf den Bereich klickt.

Wenn jemand auf den Bereich klickt, soll die Funktion ausgabe() aufgerufen wird.

Wir packen in diese Funktion ausgabe nur unser alert (später kann man da beliebiges reinpacken.

<script>
window.onload = function() {
    function ausgabe() {
    	alert('Ausgabe über Funktion ausgabe');
    }
}
</script>
<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>

Wenn wir jetzt unsere HTML-Datei im Browser ausführen, erfolgt keinerlei Ausgabe. Noch fehlt die Verbindung zwischen dem Klick - sprich dem Event - und der Funktion ausgabe(). Diesen Auslöser ("trigger") wollen wir setzen.

In der ersten Variante greifen wir auf unsere ID zu.

<script>
window.onload = function() {
    document.getElementById('btn_beispiel').addEventListener('click', ausgabe, false);
    function ausgabe() {
    	alert('Ausgabe über Funktion ausgabe');
    }
}
</script>
<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>

Das funktioniert, sieht aber weder schön aus noch ist besonders gut lesbar - daher die folgende Variante üblich, dass man erst eine Variable für unser Ergebnis des getElementById bildet und dann diese den Event-Handler bindet.

Wir setzen als die Variable btn_id_beispiel und packen da dann im zweiten Schritt den "event" daran.

Der Event kann sehr unterschiedlich sein - wir wollen im Beispiel 'click' - genauso wäre ein "mouseover" oder "keydown" etc. möglich.

<script>
window.onload = function() {
    var btn_id_beispiel = document.getElementById('btn_beispiel');
    btn_id_beispiel.addEventListener('click', ausgabe, false);
    function ausgabe() {
    	alert('Ausgabe über Funktion ausgabe');
    }
}
</script>
<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>

Und somit funktioniert unsere Ausgabe durch Anklicken von dem Bereich mit der ID "btn_beispiel".

Die gleiche Vorgehensweise würde über jQuery über folgenden Aufbau umgesetzt:

$('#btn_beispiel')

Allerdings viel langsamer in der Durchführung, da natürlich das jQuery-Framework hier einiges an Ressourcen verbraucht. Es macht also durchaus Sinn, solche einfache Umsetzung mit den Grundfunktionen von JavaScript umzusetzen.

JavaScript Events triggern über class

Jetzt wollen wir unseren JavaScript-Event über die Verwendung und einer Klasse unseres HTML-Elements nutzen. Klassen können öfters vorkommen in unserer HTML-Seite. Genau dieser Vorteil wird uns erst einmal ein Problem bereiten - aber der Reihe nach.

Klassen können über JavaScript über getElementsByClassName ansprechen. Alleine (und das ist ein beliebter Tippfehler) schon die Mehrzahl im Befehl getElementsByClassName zeigt, dass wir immer ein Array von dieser Funktion zurückgeliefert bekommen. Warum? Weil Klassen auch öfters auf einer Seite vorkommen können und i.d.R. dies auch tun.

Unser logischer Aufbau vom Beispiel mit den ID umgesetzt auf Klassen würde so aussehen (allerdings noch nicht funktionieren).

<script>
window.onload = function() {
    var btn_class_beispiel = document.getElementsByClassName('btn_klasse');
    btn_class_beispiel.addEventListener('click', ausgabe, false);
    function ausgabe() {
        alert('Ausgabe über Funktion ausgabe');
    }
}
</script>
<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>

Das ergibt eine Fehlermeldung! In der Konsole vom Developer-Tool sehen wir eine entsprechende Fehlermeldung.

Unseren addEventListener können wir nur ein Event hinzufügen und nicht ein ganzen "Schwarm" von Elementen, wie es über ein Array hereinkommt.

Also nehmen wir das Array auseinander und erstellen automatisch die benötige Anzahl von EventListener.

Wir benötigen also eine Schleife in JavaScript und die Anzahl der Elemente in Array.

Unsere Schleifenaufbau sieht wie folgt aus:

var btn_class_beispiel = document.getElementsByClassName('btn_klasse');
for (var x = 0; x < btn_class_beispiel.length; x++) {
}

Das zählen über die Variable x beginnt bei 0, da das erste Element in einem Array an der Position 0 sitzt.

Nun können wir automatisch die entsprechende Anzahl von EventListener in unserer for-Schleife erstellen:

var btn_class_beispiel = document.getElementsByClassName('btn_klasse');
for (var x = 0; x < btn_class_beispiel.length; x++) {
    btn_class_beispiel[x].addEventListener('click', ausgabe, false);
}

Wir erweitern und Beispiel um 2 Anklickbereiche, damit die Sinnhaftigkeit von der Verwendung von Klassen auch direkt sichtbar ist:

<script>
window.onload = function() {
    var btn_class_beispiel = document.getElementsByClassName('btn_klasse');
    for (var x = 0; x < btn_class_beispiel.length; x++) {
        btn_class_beispiel[x].addEventListener('click', ausgabe, false);
    }
    function ausgabe() {
        alert('Ausgabe über Funktion ausgabe');
    }
}
</script>
<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>
<div id="btn_zwei" class="btn_klasse">zweiten anklicken</div>

Probieren!

Auch hier gibt es das entsprechende jQuery Äquivalent in Form von:

$('.btn_klasse')

Und auch hier gilt - jQuery verbraucht deutlich mehr Ressourcen also die oben gezeigt direkte Methode in JavaScript.

JavaScript Events triggern über HTML-Element

Identisch mit unseren Klassen kann auf HTML-Element zugegriffen werden. Außer der JavaScript-Anweisung getElementsByTagName ändert sich hier nicht viel. Warum? Es werden auch bei der Funktion getElementsByTagName ein Array angelegt, selbst wenn es nur ein Element davon bisher auf der HTML-Seite geben sollte.

Unser Beispiel wird sich also eigentlich nur in einer Zeile ändern. Allerdings passe ich die Variablennamen an, damit es sauber von der Benennung bleibt - aus var btn_class_beispiel wird var btn_html_element_beispiel.

<script>
window.onload = function() {
    var btn_html_element_beispiel = document.getElementsByTagName('div');
    for (var x = 0; x < btn_html_element_beispiel.length; x++) {
        btn_html_element_beispiel[x].addEventListener('click', ausgabe, false);
    }
    function ausgabe() {
        alert('Ausgabe über Funktion ausgabe');
    }
}
</script>
<div id="btn_beispiel" class="btn_klasse">bitte anklicken</div>
<div id="btn_zwei" class="btn_klasse">zweiten anklicken</div>

Und schon kann jeder DIV-Bereich angeklickt werden.

Die ID und class-Angaben im HTML-Bereich können wir uns eigentlich in diesem Fall schenken.

<script>
window.onload = function() {
    var btn_html_element_beispiel = document.getElementsByTagName('div');
    for (var x = 0; x < btn_html_element_beispiel.length; x++) {
        btn_html_element_beispiel[x].addEventListener('click', ausgabe, false);
    }
    function ausgabe() {
        alert('Ausgabe über Funktion ausgabe');
    }
}
</script>
<div>bitte anklicken</div>
<div>zweiten anklicken</div>

Auch hier gibt es das entsprechende jQuery Äquivalent in Form von:

$('div')

Und auch hier gilt - jQuery verbraucht deutlich mehr Ressourcen also die oben gezeigt direkte Methode in JavaScript.

Zusammenfassung 3 Methoden zum Setzen durch addEventListener

Wir haben im Tutorial die 3 üblichen Methoden zum Setzen eines Event-Handlers über addEventListener kennen gelernt. Bei IDs kann sehr schnell es erfolgen, da wir nicht auf eine Rückgabe eines Arrays aufpassen müssen. Ansonsten sind es einfach 2 Zeilen mehr Code.

Viel Spaß beim Nutzen