> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/6-events/documentevents.md).
# 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 %}
```markup
Documentevents
...
```
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 %}