addEventListener und das Event-Objekt
Fügen Sie Event Listener hinzu, empfangen Sie das Event-Objekt, verwenden Sie preventDefault und stopPropagation und verstehen Sie Event Bubbling.
addEventListener und das Event-Objekt ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Events?
Events sind Signale, die der Browser auslöst, wenn etwas passiert: Eine Benutzerin oder ein Benutzer klickt, drückt eine Taste, bewegt die Maus, die Seite wird geladen oder eine Netzwerkanfrage wird abgeschlossen. JavaScript reagiert auf Events, indem es Event-Listener registriert.
Syntax von addEventListener
element.addEventListener(type, handler) registriert eine Funktion, die ausgeführt wird, wenn das Event ausgelöst wird. Der Handler erhält ein Event-Objekt mit Details zum Ereignis.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Häufige Event-Typen
Maus: click, dblclick, mouseenter, mouseleave, mousemove. Tastatur: keydown, keyup, keypress. Formulare: submit, input, change, focus, blur. Dokument: DOMContentLoaded, load. Fenster: resize, scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));Das Event-Objekt
Jeder Handler erhält ein Event-Objekt. Wichtige Eigenschaften: e.target (Element, das das Event ausgelöst hat), e.currentTarget (Element, für das der Listener registriert ist), e.type (Name des Events), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() verhindert die Standardaktion des Browsers. Verwenden Sie es, um das Absenden eines Formulars oder die Navigation eines Links zu verhindern oder in Spielen Kontextmenüs per Rechtsklick zu unterbinden.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() verhindert, dass das Event im DOM-Baum nach oben weitergereicht wird. Verwenden Sie es, wenn der Handler eines inneren Elements nicht den Handler des äußeren Elements auslösen soll.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Event-Bubbling
Events steigen im DOM nach oben – nachdem sie am Zielelement ausgelöst wurden, werden sie am übergeordneten Element, dann am übergeordneten Element dieses Elements und schließlich bis zum Dokument ausgelöst. So funktioniert Event-Delegation: Registrieren Sie einen Listener am übergeordneten Element und verwenden Sie e.target, um das tatsächlich angeklickte untergeordnete Element zu bestimmen.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Muster für Event-Delegation
Event-Delegation bedeutet, auf einem übergeordneten Element zu lauschen, statt Listener an jedem untergeordneten Element zu registrieren. Das ist effizienter und funktioniert automatisch auch für dynamisch hinzugefügte untergeordnete Elemente.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});Tastatur-Events
Tastatur-Events werden beim Drücken von Tasten ausgelöst. Verwenden Sie in modernem Code e.key (einen String wie 'Enter', 'Escape', 'a'). In älterem Code wurde e.keyCode verwendet (veraltet). Mit e.metaKey, e.ctrlKey und e.shiftKey erkennen Sie Modifikatortasten.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Event-Listener entfernen
Verwenden Sie removeEventListener, um einen Listener zu entfernen. Der Handler muss dieselbe Funktionsreferenz sein – anonyme Funktionen können nicht entfernt werden. In React/Vue müssen Sie dies normalerweise nicht manuell verwalten.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);Option once
Übergeben Sie { once: true } als drittes Argument, um den Listener nach seiner ersten Ausführung automatisch zu entfernen. Das ist nützlich für einmalige Aktionen wie das Ausblenden eines Splashscreens.
document.querySelector('#start').addEventListener('click', startApp, { once: true });Option capture
Standardmäßig werden Listener während der Bubbling-Phase (nach oben) ausgelöst. Übergeben Sie { capture: true }, um sie während der Capturing-Phase (nach unten, vor den eigenen Listenern des Zielelements) auszulösen.
Kurzer Test
Welche Methode verhindert, dass der Browser die Standardaktion eines Events ausführt?
Zusammenfassung: DOM-Events
addEventListener(type, handler) registriert Listener. Das Event-Objekt stellt target, type und Methoden zur Steuerung bereit. preventDefault() blockiert Standardaktionen. stopPropagation() verhindert das Bubbling. Verwenden Sie Event-Delegation für mehr Effizienz und dynamische untergeordnete Elemente. Entfernen Sie Listener, um Speicherlecks zu verhindern.
Häufig gestellte Fragen
Ist die Lektion „addEventListener und das Event-Objekt“ kostenlos?
Ja — der vollständige Text von „addEventListener und das Event-Objekt“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „addEventListener und das Event-Objekt“?
Fügen Sie Event Listener hinzu, empfangen Sie das Event-Objekt, verwenden Sie preventDefault und stopPropagation und verstehen Sie Event Bubbling. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „addEventListener und das Event-Objekt“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- querySelector und querySelectorAll
- addEventListener und das Event-Objekt
- Inhalte ändern: textContent, innerHTML, classList
- Elemente erstellen und anhängen