JavaScript Academy · Les

Lifecycle-callbacks

Haak in op wijzigingen in connected, disconnected en attributen.

Les 2 van 413 stappen

Lifecycle-callbacks is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

De levenscyclus van een element

Aangepaste elementen hebben een gedefinieerde levenscyclus. De browser roept op belangrijke momenten speciale methoden van je klasse aan:

connectedCallback — toegevoegd aan de DOM
disconnectedCallback — verwijderd uit de DOM
attributeChangedCallback — een geobserveerd attribuut verandert
adoptedCallback — verplaatst naar een nieuw document

connectedCallback

connectedCallback wordt elke keer uitgevoerd wanneer het element in het document wordt ingevoegd. Dit is de ideale plek om inhoud weer te geven, gegevens op te halen of globale gebeurtenislisteners te koppelen.

De callback kan meerdere keren worden uitgevoerd als het element wordt verplaatst.

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

disconnectedCallback

disconnectedCallback wordt uitgevoerd wanneer het element uit de DOM wordt verwijderd. Gebruik deze callback om op te ruimen: verwijder globale gebeurtenislisteners, annuleer timers of sluit verbindingen om geheugenlekken te voorkomen.

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

Attributen observeren

Om op wijzigingen van attributen te reageren, moet je met een statische getter observedAttributes aangeven welke attributen je wilt volgen. Deze getter geeft een array met namen terug.

Alleen de opgegeven attributen activeren attributeChangedCallback.

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

attributeChangedCallback

Wanneer een geobserveerd attribuut wordt toegevoegd, verwijderd of gewijzigd, roept de browser attributeChangedCallback(name, oldValue, newValue) aan. Gebruik deze callback om je weergegeven inhoud met de attributen gesynchroniseerd te houden.

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);

Argumenten van de callback

attributeChangedCallback ontvangt drie argumenten:

name — welk attribuut is gewijzigd
oldValue — vorige waarde (null als het attribuut nieuw is toegevoegd)
newValue — nieuwe waarde (null als het attribuut is verwijderd)

Vergelijk de oude en nieuwe waarde om onnodig werk over te slaan.

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

Eerste aanroepen voor attributen

Als een element al een geobserveerd attribuut heeft wanneer het wordt opgewaardeerd, wordt attributeChangedCallback één keer aangeroepen voor elk aanwezig attribuut, voordat connectedCallback wordt aangeroepen. Zo kun je het element automatisch vanuit de opmaak initialiseren.

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

Eigenschappen naar attributen spiegelen

Een veelgebruikt patroon is een JavaScript-eigenschap beschikbaar te stellen die het attribuut leest en schrijft. Zo blijft de API prettig in gebruik en toch gesynchroniseerd.

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 wordt uitgevoerd wanneer een element van het ene document naar een ander wordt verplaatst (bijvoorbeeld naar een iframe via document.adoptNode). Deze callback is zelden nodig, maar maakt de levenscyclus compleet.

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

Volgorde van de levenscyclus

Voor een element dat rechtstreeks in HTML is geschreven, is de gebruikelijke volgorde:

constructor
attributeChangedCallback (één keer per aanwezig geobserveerd attribuut)
connectedCallback

En later, wanneer het element wordt verwijderd, disconnectedCallback.

Alles samenbrengen

Een volledig element brengt alle onderdelen samen: attributen observeren, inhoud weergeven bij het koppelen, synchroniseren wanneer een attribuut verandert en opruimen bij het loskoppelen.

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);

Korte controle

Controleer je kennis van levenscycluscallbacks.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt de levenscyclus van aangepaste elementen geleerd:

connectedCallback wordt uitgevoerd bij het invoegen — geef hier inhoud weer.
disconnectedCallback wordt uitgevoerd bij het verwijderen — ruim hier op.
observedAttributes geeft aan welke attributen je wilt volgen.
attributeChangedCallback(name, old, new) reageert op wijzigingen.
adoptedCallback verwerkt verplaatsingen tussen documenten.

Vervolgens kapselen we stijlen en opmaak in met de Shadow DOM.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Lifecycle-callbacks” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Lifecycle-callbacks”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Lifecycle-callbacks”?

Haak in op wijzigingen in connected, disconnected en attributen. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Lifecycle-callbacks”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy