Lädt...

Ereignis-Listener

In der Garderobe hängt ein Haken. Der Knopf ist #peg, darauf steht hang. Darunter sagt #ticket noch blank.
Die vorige Seite war die Klingel und die Eigenschaft onclick. Dort gab es einen Platz. Die zweite Funktion hat die erste ersetzt. Hier schreiben wir diese Eigenschaft nicht. typeof und this gehören auch dorthin.
Hier geht es um addEventListener. Der Aufruf hängt eine Funktion an die Klickliste des Knopfs. Dieselbe Zeile führt sie nicht aus. Das Ticket bleibt blank, bis du peg.click() aufrufst.
Erst wool, dann silk. Die zweite ersetzt die erste nicht. Ein Klick führt beide aus: zuerst wool, dann silk. Das Ticket wird wool silk. Auf dem Knopf bleibt hang.
Dieselbe Funktion wool ein zweites Mal zu übergeben fügt nichts hinzu. Ein Klick, ein Lauf.
removeEventListener nimmt genau die Funktion weg, die du hinzugefügt hast. Eine neue Funktion, auch mit denselben Zeilen, ist ein anderes Objekt. wool bleibt.
Das Skript der Seite fügt beide hinzu und klickt einmal. Die Zeile unter dem Haken lautet wool silk / 2 / peg. Hier entsteht kein Element, es wird kein Stil gesetzt, und das Ereignisargument wird nicht gelesen. Das ist die nächste Seite.

Zwei Haken, nicht ein Platz

getElementById gibt dir nur den Knopf und den Ticketabsatz. Jeder Aufruf von addEventListener kann einen weiteren Listener daneben setzen. Ein Klick läuft die Liste von vorn nach hinten ab. Diese Funktionen nehmen keinen Parameter. Das Ereignisobjekt kommt als Nächstes.

Wer zuhört

Der Knopf beginnt mit hang, darunter steht blank. Lies die Zeilen der Reihe nach. Jedes Stück startet mit diesem frischen Knopf, außer der Seitenzeile: das ist die Demo unten. Die Demo entfernt niemanden.

📊 Wer zuhört

Moment Wer zuhört Tickettext Leicht verwechselt
click, noch kein Listener niemand blank ein leerer Klick schreibt wool
addEventListener für wool, vor click wool blank das Hinzufügen schreibt schon wool
click nur mit wool wool wool der Knopftext wird wool
wool dann silk, ein click beide, wool dann silk wool silk nur die zweite läuft
removeEventListener für wool, dann click silk silk beide laufen noch
Seitenskript, ein click beide wool silk die Zeile endet mit hang

addEventListener("click", wool) hängt wool an die Klickliste. Es ruft wool nicht auf. peg.click() schickt einen Klick und läuft die Liste von vorn ab. Der eigene Text des Knopfs ändert sich nicht.
silk danach sitzt hinter wool. Beide laufen. Die Reihenfolge ist die Reihenfolge des Hinzufügens.
Dasselbe Funktionsobjekt kommt nicht zweimal auf die Liste. peg.addEventListener("click", wool) und danach dieselbe Zeile lassen eine Liste mit einem Eintrag. Ein Klick führt wool einmal aus. parts.length ist 1, das Ticket ist wool.
removeEventListener("click", wool) nimmt dieses Objekt weg. silk bleibt, wenn du sie hinzugefügt hast. Eine neue Funktion, die ebenfalls "wool" per push ablegt, passt nicht. Nach peg.removeEventListener("click", function () { parts.push("wool"); }) ist die ursprüngliche wool noch auf der Liste. Ein Klick schreibt weiter wool.
join(" ") setzt nur ein Leerzeichen zwischen die Wörter, die schon in parts stehen. Eine leere Liste wird hier nicht verbunden. Das Ticket beginnt mit dem Wort blank und ändert sich nur in einem Listener.

Noch hört niemand

Die Datei öffnet mit Knopf und Absatz. Kein Listener ist hinzugefügt. Der Klick läuft, und diese zwei Logs fragen Ticket und Knopfwort.

Stiller Haken

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);

Die Logs sind blank und hang. Die Klickliste war leer. Der Absatz hat sich nicht geändert.

Der Listener wartet

addEventListener speichert wool. Der Rumpf läuft in dieser Zeile nicht. parts bleibt leer, das Ticket bleibt blank, der Knopf sagt weiter hang.

Hinzufügen, nicht ausführen

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Die Logs sind blank, 0 und hang. wool steht auf der Liste. Niemand hat sie aufgerufen, also hat parts noch kein Wort.

click führt aus, wer auf der Liste steht

Dieses Stück beginnt wieder beim frischen Knopf. Nur wool wird hinzugefügt, dann kommt peg.click(). Das Ticket wird wool. Der Knopftext bleibt hang. parts.length ist 1.

Ein Listener

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);
console.log(parts.length);

Die Logs sind wool, hang und 1. Ein Listener, ein Wort. hang steht weiter auf dem Knopf.

silk sitzt neben wool

Frischer Knopf. Erst wool, dann silk, und erst dann ein click. Zwischen den beiden Aufrufen gibt es keinen Klick. wool legt "wool" ab und schreibt es. silk legt "silk" ab und schreibt beide Wörter mit Leerzeichen. Das Ticket ist wool silk. parts.length ist 2. Der Knopf bleibt hang.

Beide laufen

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Die Logs sind wool silk, 2 und hang. silk hat wool nicht gelöscht. Ein Klick lief die Liste in der Reihenfolge des Hinzufügens ab.

wool vom Haken nehmen

Frischer Knopf. Beide Funktionen werden hinzugefügt, dann wird removeEventListener mit derselben Funktion wool aufgerufen. silk bleibt. Ein click führt nur silk aus. Das Ticket ist silk, nicht wool silk. parts.length ist 1.

wool entfernen

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.removeEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Die Logs sind silk, 1 und hang. wool war dasselbe Funktionsobjekt, das du hinzugefügt hast, deshalb verließ sie die Liste. Die Demo unten entfernt niemanden.

Eine Zeile unter dem Haken

Das Skript steht am Ende des body, nachdem Knopf und Absätze da sind. Es fügt wool hinzu, dann silk, und ruft click einmal auf. Jede Funktion erhöht hits um 1 und legt ihr Wort ab. Die Zeile verbindet Tickettext, Zähler und peg.id. Sie schreibt nicht den Knopftext. Sie liest kein Ereignisargument.

Seitendemo — Garderobenhaken

html 
<!DOCTYPE html>
<html>
<head>
<title>event-listeners — page</title>
</head>
<body>
<button id="peg" type="button">hang</button>
<p id="ticket">blank</p>
<p id="line">…</p>
<script>
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
let hits = 0;
function wool() {
hits = hits + 1;
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
hits = hits + 1;
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
document.getElementById("line").textContent =
ticket.textContent + " / " + hits + " / " + peg.id;
</script>
</body>
</html>

Die Zeile lautet wool silk / 2 / peg. Das Ticket ist wool silk, nicht blank. Der Zähler ist 2, weil beide Listener bei einem Klick liefen. Das letzte Wort ist die Knopf-Id, peg.id, nicht das Wort hang. Auf dem Knopf steht weiter hang. Die nächste Seite ist das Ereignisobjekt. Sie liest das Argument, das diese Funktionen auslassen.

Fünf Prüfungen am Haken

  1. Klick ohne Listener. Das Ticket ist blank, der Knopf ist hang.
  2. wool hinzufügen und nicht klicken. Das Ticket ist blank, parts.length ist 0, der Knopf ist hang.
  3. wool hinzufügen, dann klicken. Das Ticket ist wool, der Knopf ist hang, parts.length ist 1.
  4. wool, dann silk, dann einmal klicken. Das Ticket ist wool silk, parts.length ist 2, der Knopf ist hang.
  5. Beide hinzufügen, wool entfernen, dann klicken. Das Ticket ist silk, parts.length ist 1, der Knopf ist hang. Lies die Seitenzeile: wool silk / 2 / peg.

Wo dieser Haken täuscht

Auf dem Knopf steht weiter hang. Die Liste hatte beide Funktionen, oder nur silk, oder niemanden.

  • Erwarten, dass der zweite addEventListener den ersten ersetzt, so wie onclick
  • Erwarten, dass addEventListener selbst das Ticket auf wool setzt
  • Erwarten, dass nur silk läuft, wenn beide hinzugefügt sind
  • Erwarten, dass der Knopftext zu wool wird
  • Erwarten, dass removeEventListener mit einer neuen Funktion wool entfernt
  • Dieselbe Funktion wool zweimal hinzufügen und zwei Läufe erwarten
  • Hier onclick, typeof null oder this.id lesen; das war die Klingelseite
  • Hier event.target lesen; diese Funktionen nehmen kein Argument, das Ereignisobjekt ist die nächste Seite
  • Den Knopf mit createElement bauen; das war eine frühere Seite
  • Die Zeile als blank / 0 / hang lesen

Was bleibt

  • Ohne Listener lässt peg.click() das Ticket blank und den Knopf hang
  • addEventListener lässt das Ticket bis zum click blank
  • Ein Klick nur mit wool setzt das Ticket auf wool und lässt den Knopf hang
  • wool, dann silk, dann ein Klick setzt das Ticket auf wool silk
  • removeEventListener mit derselben wool, dann der Klick, setzt das Ticket auf silk
  • Dieselbe wool zweimal hinzugefügt läuft einmal, eine neue Funktion entfernt sie nicht
  • Die Seitenzeile lautet wool silk / 2 / peg

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 50 von 52
Javascript Tutorial