JavaScript Academy · Lektion

Lifecycle-Callbacks

Reagieren Sie auf verbundene und getrennte Elemente sowie Attributänderungen.

Lifecycle-Callbacks ist eine kostenlose JavaScript 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 JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Der Lebenszyklus eines Elements

Benutzerdefinierte Elemente haben einen festgelegten Lebenszyklus. Der Browser ruft zu wichtigen Zeitpunkten spezielle Methoden Ihrer Klasse auf:

connectedCallback — zum DOM hinzugefügt
disconnectedCallback — aus dem DOM entfernt
attributeChangedCallback — ein beobachtetes Attribut ändert sich
adoptedCallback — in ein neues Dokument verschoben

connectedCallback

connectedCallback wird jedes Mal ausgeführt, wenn das Element in das Dokument eingefügt wird. Hier ist der ideale Ort, um Inhalte zu rendern, Daten abzurufen oder globale Listener anzufügen.

Der Callback kann mehrmals ausgelöst werden, wenn das Element verschoben wird.

class StatusBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Online';
    console.log('badge added to page');
  }
}
customElements.define('status-badge', StatusBadge);

disconnectedCallback

disconnectedCallback wird ausgeführt, wenn das Element aus dem DOM entfernt wird. Verwenden Sie ihn zum Aufräumen: Entfernen Sie globale Listener, brechen Sie Timer ab oder schließen Sie Verbindungen, um Speicherlecks zu vermeiden.

class ClockWidget extends HTMLElement {
  connectedCallback() {
    this.timer = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.timer); // cleanup
  }
}
customElements.define('clock-widget', ClockWidget);

Attribute beobachten

Um auf Attributänderungen zu reagieren, müssen Sie mit einem statischen Getter observedAttributes, der ein Array mit Namen zurückgibt, deklarieren, welche Attribute überwacht werden sollen.

Nur aufgeführte Attribute lösen attributeChangedCallback aus.

class AvatarImage extends HTMLElement {
  static get observedAttributes() {
    return ['src', 'alt'];
  }
}
customElements.define('avatar-image', AvatarImage);

attributeChangedCallback

Wenn ein beobachtetes Attribut hinzugefügt, entfernt oder geändert wird, ruft der Browser attributeChangedCallback(name, oldValue, newValue) auf. Verwenden Sie ihn, um Ihre gerenderte Ausgabe mit den Attributen synchron zu halten.

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src') {
      this.innerHTML = '<img src="' + newValue + '">';
    }
  }
}
customElements.define('avatar-image', AvatarImage);

Argumente des Callbacks

attributeChangedCallback erhält drei Argumente:

name — welches Attribut geändert wurde
oldValue — vorheriger Wert (beim erstmaligen Hinzufügen null)
newValue — neuer Wert (beim Entfernen null)

Vergleichen Sie den alten und den neuen Wert, um unnötige Arbeit zu vermeiden.

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return; // no real change
  console.log(name + ' changed to ' + newValue);
}

Initiale Attributaufrufe

Wenn ein Element beim Aufwerten bereits ein beobachtetes Attribut besitzt, wird attributeChangedCallback für jedes dieser Attribute einmal vor connectedCallback ausgelöst. So können Sie das Element automatisch aus dem Markup initialisieren.

// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.

Eigenschaften auf Attribute spiegeln

Ein häufig verwendetes Muster besteht darin, eine JavaScript-Eigenschaft bereitzustellen, die das Attribut liest und schreibt. Dadurch bleibt die API komfortabel und gleichzeitig synchron.

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  get src() { return this.getAttribute('src'); }
  set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);

adoptedCallback

adoptedCallback wird ausgeführt, wenn ein Element von einem Dokument in ein anderes verschoben wird, beispielsweise über document.adoptNode in ein iframe. Er wird nur selten benötigt, vervollständigt aber den Lebenszyklus.

class PortableWidget extends HTMLElement {
  adoptedCallback() {
    console.log('moved to a new document');
  }
}
customElements.define('portable-widget', PortableWidget);

Reihenfolge im Lebenszyklus

Bei einem direkt in HTML geschriebenen Element lautet die typische Reihenfolge:

constructor
attributeChangedCallback (einmal pro vorhandenem beobachtetem Attribut)
connectedCallback

Später, beim Entfernen, folgt disconnectedCallback.

Alles zusammenfügen

Ein vollständiges Element verbindet alle Teile: Es beobachtet Attribute, rendert beim Verbinden, synchronisiert sich bei Attributänderungen und räumt beim Trennen auf.

class GreetUser extends HTMLElement {
  static get observedAttributes() { return ['name']; }
  connectedCallback() { this.render(); }
  attributeChangedCallback() { this.render(); }
  render() {
    const name = this.getAttribute('name') || 'Guest';
    this.textContent = 'Hello, ' + name;
  }
}
customElements.define('greet-user', GreetUser);

Kurzer Test

Testen Sie Ihr Wissen über Lebenszyklus-Callbacks.

Zusammenfassung

Sie haben den Lebenszyklus benutzerdefinierter Elemente kennengelernt:

connectedCallback wird beim Einfügen ausgeführt — rendern Sie hier.
disconnectedCallback wird beim Entfernen ausgeführt — räumen Sie hier auf.
observedAttributes legt fest, welche Attribute überwacht werden.
attributeChangedCallback(name, old, new) reagiert auf Änderungen.
adoptedCallback verarbeitet Verschiebungen zwischen Dokumenten.

Als Nächstes kapseln wir Styles und Markup mit dem Shadow DOM.

Häufig gestellte Fragen

Ist die Lektion „Lifecycle-Callbacks“ kostenlos?

Ja — der vollständige Text von „Lifecycle-Callbacks“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Lifecycle-Callbacks“?

Reagieren Sie auf verbundene und getrennte Elemente sowie Attributänderungen. Du übst JavaScript 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 JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript 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 „Lifecycle-Callbacks“?

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 JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript 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

← Zurück zu JavaScript Academy