JavaScript - Événements Fenêtre/Document

Salut à toi, futurs codeurs ! Aujourd'hui, nous allons plonger dans le monde passionnant des événements JavaScript, en nous concentrant spécifiquement sur les événements Fenêtre et Document. En tant que votre enseignant bienveillant en informatique, je suis là pour vous guider à travers ce voyage avec un tas d'exemples et d'explications. Alors, prends ta boisson favorite, installe-toi confortablement, et c'est parti !

Événements Fenêtre

Les événements Fenêtre sont des actions qui se produisent en relation avec la fenêtre du navigateur elle-même. Ces événements peuvent être extrêmement utiles pour créer des applications web dynamiques et réactives. Explorons certains des événements fenêtre les plus courants :

1. load

L'événement load est déclenché lorsque la page entière, y compris toutes les ressources dépendantes comme les feuilles de style et les images, a terminé de charger. On utilise souvent cet événement pour s'assurer que tous les éléments sont disponibles avant d'exécuter des scripts.

window.addEventListener('load', function() {
console.log("Page entièrement chargée !");
});

Dans cet exemple, nous ajoutons un écouteur d'événement à l'objet fenêtre. Lorsque l'événement 'load' se produit, notre fonction s'exécutera, enregistrant un message dans la console.

2. resize

L'événement resize est déclenché chaque fois que la fenêtre du navigateur est redimensionnée. Cela peut être utile pour ajuster les mises en page ou recalculer les dimensions.

window.addEventListener('resize', function() {
console.log("Fenêtre redimensionnée à : " + window.innerWidth + "x" + window.innerHeight);
});

Ici, nous enregistrons les nouvelles dimensions de la fenêtre chaque fois qu'elle est redimensionnée. Cela pourrait être utile pour des ajustements de design réactif.

3. scroll

L'événement scroll est déclenché lorsque l'utilisateur fait défiler dans la fenêtre. Cela peut être utilisé pour implémenter un défilement infini ou pour afficher/masquer des éléments en fonction de la position de défilement.

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("Défilé à la position : " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

Dans cet exemple, nous affichons un bouton 'Retour en haut' lorsque l'utilisateur a défilé plus de 300 pixels vers le bas de la page.

4. unload

L'événement unload est déclenché lorsque l'utilisateur navigue hors de la page. Cela peut être utilisé pour des tâches de nettoyage ou pour inviter l'utilisateur avant de quitter.

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

Ce code invitera l'utilisateur avec une boîte de dialogue de confirmation lorsqu'il essaie de quitter la page. souviens-toi d'utiliser ceci avec parcimonie, car cela peut être agaçant pour les utilisateurs !

Événements Document

Les événements Document sont liés au document HTML lui-même. Ces événements nous permettent d'interagir avec le contenu de la page de diverses manières. Jetons un œil à certains événements clés du document :

1. DOMContentLoaded

L'événement DOMContentLoaded est déclenché lorsque le document HTML initial a été entièrement chargé et analysé, sans attendre que les ressources externes finissent de charger.

document.addEventListener('DOMContentLoaded', function() {
console.log("DOM prêt !");
document.getElementById('myButton').addEventListener('click', function() {
alert("Bouton cliqué !");
});
});

Cet événement est souvent préféré à window.load car il n'attend pas que les images et autres ressources finissent de charger, permettant une exécution plus rapide des scripts.

2. click

L'événement click est déclenché lorsque un élément est cliqué. C'est l'un des événements les plus courants avec lesquels vous travaillerez.

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("Bouton cliqué aux coordonnées : " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

Dans cet exemple, nous enregistrons les coordonnées du clic et changeons la couleur de fond du bouton lorsque celui-ci est cliqué.

3. keydown et keyup

Ces événements sont déclenchés lorsque une touche est pressée (keydown) ou relâchée (keyup).

document.addEventListener('keydown', function(event) {
console.log("Touche pressée : " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

Ce code enregistre chaque pression sur une touche et simule un clic sur un bouton de soumission lorsque la touche Entrée est pressée.

4. mouseover et mouseout

Ces événements sont déclenchés lorsque le pointeur de la souris entre (mouseover) ou quitte (mouseout) un élément.

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

Cela crée un effet de survol simple, changeant la couleur de fond d'un élément lorsque la souris le survole.

Tableau des Méthodes d'Événement

Voici un tableau pratique résumant les méthodes que nous avons discutées :

Événement	Description	Exemple
load	Déclenché lorsque la page est entièrement chargée	window.addEventListener('load', function() {...})
resize	Déclenché lorsque la fenêtre est redimensionnée	window.addEventListener('resize', function() {...})
scroll	Déclenché lorsque la fenêtre est défilée	window.addEventListener('scroll', function() {...})
unload	Déclenché lors de la navigation hors de la page	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	Déclenché lorsque le DOM est prêt	document.addEventListener('DOMContentLoaded', function() {...})
click	Déclenché lorsque un élément est cliqué	element.addEventListener('click', function(event) {...})
keydown	Déclenché lorsque une touche est pressée	document.addEventListener('keydown', function(event) {...})
keyup	Déclenché lorsque une touche est relâchée	document.addEventListener('keyup', function(event) {...})
mouseover	Déclenché lorsque le pointeur de la souris entre dans un élément	element.addEventListener('mouseover', function() {...})
mouseout	Déclenché lorsque le pointeur de la souris quitte un élément	element.addEventListener('mouseout', function() {...})

Et voilà, les amis ! Nous avons couvert les bases des événements Fenêtre et Document en JavaScript. Souviens-toi, la pratique rend parfait, alors n'hesite pas à expérimenter avec ces événements dans tes propres projets. Avant de t'en rendre compte, tu créeras des pages web interactives et dynamiques comme un pro !

Bonne programmation, et que tes événements se déclenchent toujours comme prévu !

Credits: Image by storyset