Documentevents

Documentevents zijn gebeurtenissen die de browser zelf genereert en waar de gebruiker geen invloed op heeft. jQuery kent vier documentevents, namelijk:

$(document).ready()

Zoals we reeds weten is dit veruit het belangrijkste browserevent. Onze jQuerycode kan immers niet werken als ze niet binnen dit event staat. Het ready-event wordt actief zodra de volledige pagina in het DOM is ingelezen, maar de code wordt wel uitgevoerd VOOR alle externe bestanden, zoals afbeeldingen en externe media zijn ingeladen.

  • Lange notatie: $(document).ready(function(){ ... });

  • Korte notatie: $(function(){ ... });

$(window).on('load', function(){...})

Het load-event wordt actief zodra de volledige pagina, inclusief externe bestanden, in het DOM is ingelezen.

  • $(window).on('load', function(){ ... });

$(window).on('unload', function(){...})

Het unload-event wordt actief zodra de gebruiker de pagina sluit.

  • $(window).on('unload', function(){ ... });

★ Open events/documentEvents.html en bekijk het resultaat in een browser.

<body>
    <h1>Documentevents</h1>
    <p><img src="..." alt="..."></p>
</body>
...
<script>
window.onload = function() {
    var imgUrl = 'https://picsum.photos/436/314';
    document.getElementById('foto').src = imgUrl;
    alert('window is loaded (vanilla javascript)\n' + imgUrl);
};
$(function () {
    $('img:eq(0)').attr('src', '../assets/fotos/roos.jpg');
    alert('document is ready (jQuery)');
});
$(window).on('load', function () {
    $('img:eq(0)').attr('src', '../assets/fotos/tulp.jpg');
    alert('window is loaded (jQuery)');
});
$(window).on('unload', function () {
    alert('window is unloaded');
});
</script>

Het src-attribuut van de afbeelding heeft weliswaar een waarde, maar vooraleer deze wordt geladen wordt die al overschreven.. De afbeelding wordt vanuit jQuery toegevoegd.

De scripts worden in deze volgorde uitgevoerd:

  • Eerst wordt het ready-event (jQuery) uitgevoerd. De roos verschijnt op de pagina.

  • Vervolgens wordt het load-event (jQuery) en het onload-event (vanilla javascript) nagenoeg gelijktijdig uitgevoerd. Omdat $(window).on('load',...) in de code na window.onload staat, wordt de roos vervangen door een tulp.

  • Bij het sluiten van de pagina (of bij een reload) wordt het unload-event geactiveerd.

Plaats in het script de functie window.onload eens achteraan de script-tag en kijk welke afbeelding er op het einde tevoorschijn komt.

Merk op dat niet elke browser hetzelfde reageert op de verschillende events. (Zie caveats load-event) De meeste browser onderdrukken zelfs het unload-event omdat er in het verleden vaak misbruik van werd gemaakt.

Previous6 EventsNextGebruikersevents

Last updated