Informatik Webentwicklung – JavaScript Events und DOM
Karteikarten zum Thema „Informatik“ · 14 Karten · von atrio. Beispiele: Was ist ein Event in JavaScript? · Wie registriert man einen Event-Handler modern?
Karten
14 KartenWas ist ein Event in JavaScript?
Rückseite
Ein Event signalisiert, dass etwas passiert ist – z. B. Klick, Tastendruck oder Ladevorgang – und ermöglicht darauf zu reagieren.
Wie registriert man einen Event-Handler modern?
Rückseite
Mit element.addEventListener('click', handler) – erlaubt mehrere Handler pro Event und kontrolliert Capturing/Bubbling über drittes Argument.
Unterschied zwischen Event-Capturing und Event-Bubbling?
Rückseite
Capturing: Event wandert vom Document zum Target. Bubbling: Event steigt vom Target zum Document hoch. Standard ist Bubbling.
Was bewirkt event.stopPropagation()?
Rückseite
Verhindert, dass das Event weiter die DOM-Hierarchie hinaufbubbelt – Eltern-Handler werden nicht mehr ausgeführt.
Was bewirkt event.preventDefault()?
Rückseite
Unterdrückt das Standardverhalten des Browsers – z. B. Formularabsenden, Linknavigation oder Textauswahl beim Doppelklick.
Welche Informationen liefert das Event-Objekt?
Rückseite
Typ, target, currentTarget, Phase, Tasten-/Mauskoordinaten, Modifier-Keys und Methoden wie stopPropagation/preventDefault.
Unterschied zwischen event.target und event.currentTarget?
Rückseite
target: Element, auf dem Event ursprünglich ausgelöst wurde. currentTarget: Element, an dessen Handler das Event gerade verarbeitet wird.
Was ist Event-Delegation und wozu nutzt man sie?
Rückseite
Ein Handler am Eltern-Element fängt Events der Kinder via Bubbling ab – spart Speicher und funktioniert für dynamisch eingefügte Elemente.
Wie wählt man ein Element per ID aus dem DOM?
Rückseite
document.getElementById('id') – liefert genau ein Element oder null, da IDs eindeutig sein müssen.
Wie erstellt man ein neues DOM-Element?
Rückseite
document.createElement('tagName') erzeugt ein detached Element, das erst durch appendChild/insertBefore in den Baum eingefügt wird.
Wie fügt man ein Kind-Element in ein Eltern-Element ein?
Rückseite
parent.appendChild(child) hängt am Ende an; parent.insertBefore(child, referenceNode) fügt vor Referenzknoten ein.
Wie entfernt man ein Element aus dem DOM?
Rückseite
element.remove() (modern) oder parent.removeChild(element) – beide lösen das Element aus dem Baum, Referenzen bleiben bestehen.
Unterschied zwischen textContent und innerHTML?
Rückseite
textContent setzt/liest reinen Text (sicher, schnell). innerHTML parst HTML-Strings (flexibel, aber XSS-gefährdet bei Nutzerdaten).
Wie erstellt und dispatcht man ein Custom Event?
Rückseite
new CustomEvent('name', { detail: data, bubbles: true }) erstellt es; element.dispatchEvent(event) löst es synchron aus.