Événements du cycle de vie de la page JavaScript
Dans ce guide détaillé, nous explorons quatre événements JavaScript fondamentaux : DOMContentLoaded, load, beforeunload et unload. Ces événements sont essentiels pour contrôler le comportement des pages web lors des phases clés de l'interaction utilisateur et du cycle de vie de la page. Ci-dessous, nous proposons des descriptions enrichies et des exemples interactifs que vous pouvez exécuter directement dans votre navigateur pour voir ces événements en action.
Plongée au cœur de l'événement DOMContentLoaded
L'événement DOMContentLoaded se déclenche dès que le document HTML a été entièrement analysé, ce qui se produit généralement bien avant le chargement des images, des feuilles de style et d'autres ressources externes.
Exemple interactif : DOMContentLoaded en action
Pour voir DOMContentLoaded en action, l'exemple suivant met à jour le contenu d'un élément div une fois le document HTML entièrement analysé, mais avant que la page entière ne soit complètement chargée.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOMContentLoaded Example</title>
</head>
<body>
<div id="output">Waiting for DOM...</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('output').innerHTML = 'DOM fully loaded and parsed!'
});
</script>
</body>
</html>Cet exemple peut être collé dans n'importe quel fichier HTML et visualisé dans un navigateur pour observer la rapidité avec laquelle DOMContentLoaded se déclenche par rapport au chargement complet de la page.
Exploration de l'événement load
L'événement load est essentiel pour les opérations nécessitant que la page web entière soit complètement chargée, y compris toutes les ressources dépendantes comme les images et les feuilles de style. Cet événement garantit que chaque élément est disponible pour une manipulation par script.
Exemple interactif : Démonstration de l'événement load
Ici, nous créons un exemple où un message s'affiche uniquement après que tout sur la page soit complètement chargé. Comme vous pouvez le voir, l'événement DOMContentLoaded se produit toujours avant l'événement load.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load Event Example</title>
</head>
<body>
<div>You see first triggered event on top of the other.</div>
<script>
window.addEventListener('load', function() {
const newDiv = document.createElement("div");
newDiv.innerHTML = 'loaded event happened!'
document.body.append(newDiv);
});
window.addEventListener('DOMContentLoaded', function() {
const newDiv = document.createElement("div");
newDiv.innerHTML = 'DOMContentLoaded event happened!'
document.body.append(newDiv);
});
</script>
</body>
</html>Copiez et testez ce code dans votre propre environnement HTML pour observer la différence de timing entre DOMContentLoaded et load.
Gestion de l'événement beforeunload
L'événement beforeunload est extrêmement utile pour prévenir la perte de données, en avertissant les utilisateurs avant qu'ils ne quittent une page qui pourrait contenir des modifications non enregistrées.
Exemple interactif : Implémentation de la confirmation beforeunload
Cet exemple invite l'utilisateur avec une boîte de dialogue de confirmation lors de la tentative de quitter la page, aidant ainsi à prévenir une perte de données accidentelle.
<!DOCTYPE html>
<html lang="en">
<head>
<title>beforeunload Example</title>
</head>
<body>
<p>Now if you want to exit this page, a confirmation alert will be shown as a result of the <code>beforeunload</code> event.</p>
<script>
window.addEventListener('beforeunload', function(event) {
event.returnValue = '';
});
</script>
</body>
</html>Testez ce code en accédant à la page « essayez-le vous-même » puis en essayant de naviguer vers une autre page.
Utilisation de l'événement unload
WARNING
L'événement unload est déprécié et vous ne pourrez pas l'utiliser dans la plupart des navigateurs modernes. Il est également considéré comme une mauvaise pratique. Cette section est donc uniquement fournie pour mieux comprendre les codes hérités.
Bien que moins couramment utilisé en raison des restrictions des navigateurs modernes et de l'essor des applications monopage, l'événement unload reste pertinent pour libérer des ressources ou effectuer des analyses pendant le déchargement complet d'une page.
Exemple interactif : Utilisation de l'événement unload
Ce code affiche un message d'alerte lorsque la page est en cours de déchargement. Cependant, comme mentionné, il est déprécié et ne fonctionne pas sur la plupart des navigateurs modernes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>unload Example</title>
</head>
<body>
<script>
window.addEventListener('unload', function(event) {
alert('Page is unloading...');
// Perform cleanup tasks or analytics here
});
</script>
</body>
</html>Conclusion
En maîtrisant ces événements JavaScript, les développeurs peuvent créer des applications web plus robustes, interactives et conviviales. Chaque événement correspond à une phase spécifique du cycle de vie d'une page web, du chargement initial au déchargement final, offrant aux développeurs un contrôle précis sur le comportement et les performances de leurs applications web.
Pratique
Que fait l'événement 'beforeunload' dans l'exemple HTML fourni ?