EventListener: Elemente durch Nutzer anklickbar machen und JavaScript ausführen
Jetzt wollen wir auch Action durch JavaScript und unser bisheriges neues Wissen über die gezielte Auswahl von Elementen des DOM-Baumes anwenden. Ein Element soll nun durch den Nutzer anklickbar werden und dann durch JavaScript eine Aktion erfolgen.
Wichtig dabei ist, dass wir uns die Funktion von EventListener wieder ins Gedächtnis rufen. Bisher haben wir ja durch den folgenden Aufbau einfach abgewartet, bis unsere HTML-Elemente komplett geladen waren, damit diese für unsere JavaScript-Aktionen auch zur Verfügung stehen.
<script>
window.addEventListener("load", function() {
// Aktion
}, false );
</script>
Jetzt wollen wir auch einen EventListener, der einfach auf einen Mausklick reagiert.
Wir könnten natürlich über JavaScript jedes beliebige Element mit dieser Klick-Funktion versehen, nur dem Nutzer wird es nicht ersichtlich sein, warum er auf einen bestimmten Text bzw. Element klicken soll – daher nutzen wir den üblichen HTML-Button. Dazu erstellen wir in unserem HTML-Beispiel einen zusätzlichen Button mit der ID btn1.
<html>
<head>
<title>Seitentitel</title>
<script>
window.addEventListener("load", function() {
} );
</script>
</head>
<body>
<h1 class="wichtig">Überschrift 1</h1>
<p class="wichtig">Erster Absatz mit Text</p>
<p>Zweiter Absatz mit Text</p>
<a href="https://www.javascript-kurs.de/">Text des Links</a>
<p><button id="btn1">bitte klicken</button>
</body>
</html>
Nun wollen wir eine Zugriffsmöglichkeit über JavaScript schaffen. Eigentlich könnten wir auch über getElementsByType() darauf zugreifen – allerdings können unter Umständen in Zukunft weitere <button>-Elemente integriert werden und dann macht diese unpräzise Selektion Probleme. Daher gehen wir den sicheren Weg und wählen das Element anhand der vergebenen ID btn1 aus:
let schaltflaeche1 = document.getElementById("btn1");
Ich wähle hier bewusst als Bezeichnung schaltflaeche1 aus um den Unterschied zwischen der HTML-ID btn1 und der durch getElementById() erzeugten Variablen schaltflaeche1 zu zeigen. Technisch könnten wir auch hier wieder als Bezeichnung btn1 verwenden – JavaScript macht das nichts aus, nur könnte es zur Verwirrung des Programmiereinsteigers führen.
Zur Sicherheit können wir den Inhalt einfach in der Konsole ausgeben lassen:
let schaltflaeche1 = document.getElementById("btn1")
console.log(schaltflaeche1);
Und jetzt wollen wir unseren EventListener erstellen:
let schaltflaeche1 = document.getElementById("btn1");
console.log(schaltflaeche1);
schaltflaeche1.addEventListener("click", function() {
alert("angeklickt")
}, false);
Das ganze packen wir in den bestehenden EventListener, der sicherstellt, dass alle Elemente unserer Seite auch komplett geladen sind:
<html>
<head>
<title>Seitentitel</title>
<script>
window.addEventListener("load", function() {
let schaltflaeche1 = document.getElementById("btn1");
schaltflaeche1.addEventListener("click", function() {
alert("angeklickt")
}, false);
} );
</script>
</head>
<body>
<h1 class="wichtig">Überschrift 1</h1>
<p class="wichtig">Erster Absatz mit Text</p>
<p>Zweiter Absatz mit Text</p>
<a href="https://www.javascript-kurs.de/">Text des Links</a>
<p><button id="btn1">bitte klicken</button>
</body>
</html>
Nach dem Starten im Browser können wir nun jederzeit im Browser auf unseren Button klicken und die JavaScript-Funktion alert wird ausgeführt. Solange das Browserfenster geöffnet ist, können wir beliebig oft auf unseren Button mit der vorgesehenen Funktion klicken.
Wir könnten auch unsere erste Überschrift anklickbar machen – dazu ersetzen wir einfach
let schaltflaeche1 = document.getElementById("btn1");
durch
let schaltflaeche1 = document.querySelector("h1");
Jetzt können wir anstelle unseres Buttons die Überschrift anklicken und erhalten eine Reaktion.
Anzeige unserer EventListener in Chrome
Gehen wir in Google Chrome auf das Untersuchen der einzelnen Elemente und haben rechts den Reiter „Event Listeners“ geöffnet, sehen wir nun schön bei unserem Beispiel, dass hinter unserem Element button zwei EventListeners registriert sind. Als Erstes taucht der EventListener für click auf und zusätzlich für load. Beides ist im folgenden Screenshot zu sehen:
Anzeige unserer EventListener zur Kontrolle in Firefox
Ab der Firefox-Version 33 sieht man im HTML Panel neben dem gewählten Element, ob ein EventListener an das Element gebunden ist.
Dieses kann über die Schaltfläche bubbling aufgeklappt werden und man sieht den dahinterstehenden Code:
