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 Events NextGebruikersevents

Last updated 6 years ago

$(document).ready()

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

Korte notatie: $(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.