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
Seit 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:
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
