Lädt...

JavaScript-Ereignisse

An der Wohnungstür hängt eine Klingel. Der Knopf ist #bell, darauf steht press. Darunter sagt #chime noch silent. Im HTML gibt es kein onclick-Attribut, also ist bell.onclick von Anfang an null.
Eine alte Falle: typeof null ist in JavaScript "object". Deshalb ist typeof bell.onclick ebenfalls "object", nicht "null" und nicht "undefined". Der Vergleich bell.onclick === null stimmt.
Eine Funktion in onclick zu legen klingelt nicht sofort. Der Text bleibt silent, bis bell.click() die Funktion in dem Platz ausführt. Der Platz hält eine Funktion. Schreibst du eine zweite hinein, ist die erste weg. Ein Klick führt nicht beide aus. addEventListener kommt auf der nächsten Seite; dort stapeln sich Listener. Diese Seite ruft es nicht auf.
bell.onclick = null leert den Platz. Ein Klick danach lässt den Text in Ruhe. In der Funktion ist this der Knopf, also ist this.id bell. Das Wort auf dem Knopf bleibt press. Das Skript der Seite klickt einmal. Die Zeile unter der Klingel lautet dong / 1 / bell. Hier entsteht kein Element, und es wird keine CSS-Eigenschaft gesetzt.

Ein Platz am Knopf

Die vorige Seite baute li-Knoten mit createElement und setzte sie mit append, prepend und insertBefore. Hier entsteht kein Knoten, und children wird nicht gelesen. Die Seite davor schrieb style und classList auf einen Farbchip. Hier wird style nicht gesetzt. getElementById gibt dir nur den Knopf und den Absatz. Neu ist die Eigenschaft onclick: eine Funktion oder null.

Was in dem Platz liegt

Der Knopf beginnt mit press, darunter steht silent. 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 setzt kein null.

📊 Was in dem Platz liegt

Moment Inhalt von onclick Klingeltext Leicht verwechselt
vor jeder Zuweisung null; typeof ist "object" silent typeof als "null" lesen
nach der Funktion ding, vor click eine Funktion silent die Zuweisung klingelt schon
nach click mit ding diese Funktion ding der Knopftext wird ding
dong ersetzt ding, dann ein click die Funktion dong, nicht ding dong beide Funktionen laufen
onclick = null, dann click, frischer Knopf null; typeof ist "object" silent ein leerer Platz klingelt noch
Seitenskript, ein click eine Funktion; this.id ist bell dong die Zeile endet mit silent

onclick ist eine Eigenschaft des Elements. Ohne Handler ist der Wert null, und typeof null bleibt "object". Mit === null siehst du, dass der Platz leer ist. Die Zuweisung speichert die Funktion. Sie ruft sie nicht auf. bell.click() löst einen Klick aus und führt die Funktion aus, die gerade im Platz liegt. Der eigene Text des Knopfes ändert sich nicht. Eine zweite Zuweisung überschreibt die Eigenschaft. Wenn du der ersten Funktion einen Namen gelassen hast, gibt es das Objekt noch im Speicher, aber die Eigenschaft zeigt nicht mehr darauf. onclick = null nimmt den Handler weg. Ein HTML-Attribut onclick würde denselben Platz füllen; dieser Knopf hat keins. Eine Pfeilfunktion in diesem Platz setzt this nicht auf den Knopf. Diese Seite nimmt eine normale function.

Der Platz ist zuerst leer

Die Datei öffnet mit Knopf und Absatz. Noch ist nichts zugewiesen. Diese vier Ausgaben fragen die Eigenschaft, ihr typeof, den Klingeltext und das Wort auf dem Knopf.

Stille Klingel

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.textContent);

Die Ausgaben sind null, object, silent und press. Der Platz ist leer. typeof druckt nicht das Wort null. Knopf und Absatz zeigen noch die Wörter aus dem Markup.

Die Funktion wartet

onclick = function ... speichert die Funktion. Der Rumpf läuft in dieser Zeile nicht. Die Klingel ist weiter silent, und die Eigenschaft ist nicht mehr null.

Zuweisen, nicht klingeln

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.onclick === null);

Die Ausgaben sind function, silent und false. Im Platz liegt eine Funktion. Der Absatz hat sich nicht geändert, weil niemand die Funktion aufgerufen hat.

click führt die eine aus

bell.click() führt den aktuellen Handler aus. Die Klingel wird ding. Der Knopftext bleibt press. Nach dem Klick liegt weiter eine Funktion im Platz.

Einmal klicken

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
bell.click();
console.log(chime.textContent);
console.log(bell.textContent);
console.log(typeof bell.onclick);

Die Ausgaben sind ding, press und function. Ein Klick, eine Änderung, und die Änderung sitzt im Absatz. Das Wort press bleibt am Knopf.

Die zweite Funktion ersetzt die erste

Dieses Stück beginnt wieder beim frischen Knopf. Zuerst wird ding gespeichert, dann dong darüber geschrieben, und erst danach kommt ein click. Zwischen den Zuweisungen gibt es keinen Klick, also wird die Klingel in diesem Lauf nie ding. Nach dem Klick ist sie dong. bell.onclick === ding ist false. bell.onclick === dong ist true.

Die zweite bleibt

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
function ding() {
chime.textContent = "ding";
}
function dong() {
chime.textContent = "dong";
}
bell.onclick = ding;
bell.onclick = dong;
bell.click();
console.log(bell.onclick === ding);
console.log(bell.onclick === dong);
console.log(chime.textContent);

Die Ausgaben sind false, true und dong. Der Name ding zeigt noch auf eine Funktion. Die Eigenschaft nicht. Ein Klick hat nur dong ausgeführt.

null leert den Platz

Lauf das am frischen Knopf. Eine Funktion wird gesetzt und vor jedem Klick wieder gelöscht. bell.click() nach null schreibt kein dong. Die Klingel bleibt silent. typeof ist wieder object, weil der Wert null ist.

Platz leeren

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "dong";
};
bell.onclick = null;
bell.click();
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);

Die Ausgaben sind null, object und silent. Die Funktion, die dong geschrieben hätte, liegt beim Klick nicht im Platz. Die Seitendemo unten leert den Platz nicht.

Eine Zeile unter der Klingel

Das Skript steht am Ende von body, nach Knopf und Absatz. Es speichert eine Funktion und ruft einmal click auf. In der Funktion geht taps von 0 auf 1, die Klingel wird dong, und this.id landet in bell.dataset.who. Die Zeile hängt Klingeltext, Zähler und diese id aneinander. Den Knopftext schreibt sie nicht.

Seitendemo — Türklingel

html 
<!DOCTYPE html>
<html>
<head>
<title>events — page</title>
</head>
<body>
<button id="bell" type="button">press</button>
<p id="chime">silent</p>
<p id="line">…</p>
<script>
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
let taps = 0;
bell.onclick = function () {
taps = taps + 1;
chime.textContent = "dong";
bell.dataset.who = this.id;
};
bell.click();
document.getElementById("line").textContent =
chime.textContent + " / " + taps + " / " + bell.dataset.who;
</script>
</body>
</html>

Die Zeile lautet dong / 1 / bell. Die Klingel ist dong, nicht silent. Die Zahl ist 1, weil das Skript einmal klickt. Das letzte Stück ist die id des Knopfes, aus this im Handler, nicht das Wort press. Auf dem Knopf steht weiter press. Die nächste Seite behandelt Event-Listener. Ihr Werkzeug ist nicht dieser eine onclick-Platz.

Fünf Proben

  1. Lies onclick, typeof bell.onclick, den Klingeltext und den Knopftext. Die Werte sind null, object, silent und press.
  2. Weise die Funktion ding zu und klicke nicht. typeof ist function, die Klingel bleibt silent, und onclick === null ist false.
  3. Rufe bell.click() mit dieser Funktion ding auf. Die Klingel ist ding, der Knopf ist press, und typeof ist function.
  4. Weise ding zu, dann dong, dann ein Klick. onclick === ding ist false, onclick === dong ist true, und die Klingel ist dong.
  5. Am frischen Knopf eine Funktion zuweisen, onclick auf null setzen, dann klicken. Die Werte sind null, object und silent. Die Zeile lautet dong / 1 / bell.

Woran diese Klingel hakt

Auf dem Knopf steht weiter press. Im Platz lag die falsche Funktion, oder der Platz war leer.

  • typeof bell.onclick als "null" lesen, obwohl der Wert null ist
  • Erwarten, dass schon die Zuweisung die Klingel auf ding setzt
  • Erwarten, dass nach der zweiten Zuweisung ding und dong bei einem Klick beide laufen
  • Erwarten, dass der Knopftext zu ding wird
  • Erwarten, dass click die Klingel noch ändert, nachdem onclick null ist
  • Eine Pfeilfunktion nutzen und this.id als bell erwarten
  • Hier event.target lesen; diese Funktionen haben kein Argument, das Event-Objekt kommt später
  • Hier addEventListener aufrufen; die nächste Seite stapelt Listener
  • Den Knopf mit createElement bauen; das war die vorige Seite
  • Die Zeile als silent / 0 / press lesen

Das nimmst du mit

  • Ohne Handler ist bell.onclick null und typeof bell.onclick object
  • Eine zugewiesene Funktion lässt die Klingel bis zum click silent
  • bell.click() mit der Funktion ding setzt die Klingel auf ding und lässt den Knopf bei press
  • Die zweite Zuweisung ersetzt die erste, ein Klick führt also nur dong aus
  • onclick = null und danach click am frischen Knopf lässt die Klingel silent
  • Die Zeile lautet dong / 1 / bell, und this.id im Handler ist bell

🧠 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 49 von 52
Javascript Tutorial