»addEventListener«
In dem folgenden Programm findet sich JavaScript -Quelltext im HTML-Teil.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css"></style></head><body>
<span id="span" onclick="span.innerHTML=1">0</span>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>
Um ein bessere Trennung zu erreichen, kann die Ereignisbehandlung auch von JavaScript aus als Funktion zu dem span-Element hinzugefügt werden.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css"></style></head><body>
<span id="span">0</span>
<pre><code><script>/*<![CDATA[*/
span.addEventListener( "click", () => span.innerHTML = 1 );
/*]]>*/</script></code></pre></body></html>
Aus dem Attributnamen »onclick« (engl. “on click ”, „bei Klick“) wird durch Fortlassen der initialen Präposition »on« der Ereignisname »click«, entsprechend auch bei anderen Attributname: »onmousedown« wird »mousedown« und so weiter.
Erleichterungen für Übungsaufgaben
Zur Erleichterung können Sie in folgenden Lektionen an Stelle von »addEventListener« auch weiterhin on-Attribute verwenden, also beispielsweise an Stelle von »span.addEventListener( "click", () => span.innerHTML = 1 );« in einem Skript-Element »onclick="span.innerHTML=1"« als Attribut des span-Elements.
Übungsaufgaben
/ Übungsaufgabe
Überarbeiten Sie das folgende Programm so, daß die Ereignisbehandlung nicht mehr in HTML mit einem onclick-Attribut, sondern von JavaScript aus mit einem Aufruf von »addEventListener« hinzugefügt wird.
Verwenden Sie zunächst noch kein »document.getElementById«, sondern zur Vereinfachung weiterhin NAOTWO zum Elementzugriff.
- Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).
- Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css"></style></head><body>
<span id="span" onclick="alert( 'ok' )">Text</span>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>
Zur Erleichterung der Bearbeitung können Sie bei dieser und bei allen folgenden Übungsaufgaben an Stelle von polyglottem HTML auch weiterhin SIL verwenden.
Main.html<span id="span" onclick="alert( 'ok' )">Text</span>
<script></script>
/ Übungsaufgabe
Überarbeiten Sie das Ergebnis der vorherigen Übungsaufgabe so, daß es nicht mehr den automatisch per NAOTWO (“now two ”) definierten Namen »span« verwendet, sondern »document.getElementById«, um auf das Element mit der Kennung »span« zuzugreifen.