# 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(){ ... });`

{% hint style="success" %}
★ Open **events/documentEvents.html** en bekijk het resultaat in een browser.
{% endhint %}

![](/files/-L9sGbDjvWglNH5gyuqX)

```markup
<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.

{% hint style="info" %}
Plaats in het script de functie `window.onload` eens achteraan de script-tag en kijk welke afbeelding er op het einde tevoorschijn komt.
{% endhint %}

{% hint style="danger" %}
Merk op dat niet elke browser hetzelfde reageert op de verschillende events. (Zie [caveats load-event](http://api.jquery.com/load-event/)) De meeste browser onderdrukken zelfs het unload-event omdat er in het verleden vaak misbruik van werd gemaakt.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://1itf.gitbook.io/jquery/6-events/documentevents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
