Référence des événements HTML : Guide du débutant pour rendre vos pages Web interactives

Bonjour à tous, futurs développeurs web ! Je suis ravi de vous guider dans cette aventure passionnante vers le monde des événements HTML. En tant que quelqu'un qui enseigne l'informatique depuis plus d'une décennie, je peux vous dire que comprendre les événements, c'est comme apprendre le langage secret de l'interactivité web. Alors, plongons dedans et découvrons ce royaume magique ensemble !

HTML - Events Reference

Qu'est-ce que les événements HTML ?

Avant de nous plonger dans les détails, comprenstons ce que sont les événements HTML. Imaginez que vous êtes à une fête (une page web), et chaque fois que vous faites quelque chose - comme taper sur l'épaule quelqu'un (cliquer sur un bouton) ou chuchoter un secret (saisir du texte) - c'est un événement. Dans le monde du web, les événements sont des actions ou des occurrences qui se produisent dans votre navigateur, que votre HTML peut détecter et y répondre. Génial, non ?

Maintenant, explorons différents types d'événements et comment les utiliser.

Attributs des événements de fenêtre

Les événements de fenêtre sont comme le bisaillon de la maison de votre page web. Ils vous disent quand quelqu'un arrive ou part.

Voici un tableau des événements de fenêtre courants :

Événement	Description
onload	Se déclenche lorsque la page finit de charger
onunload	Se déclenche lorsque l'utilisateur quitte la page
onresize	Se déclenche lorsque la fenêtre du navigateur est redimensionnée
onscroll	Se déclenche lorsque l'utilisateur fait défiler la page

Voyons un exemple :

<body onload="alert('Bienvenue sur ma page !')">
<h1>Mon site incroyable</h1>
</body>

Dans cet exemple, dès que la page charge, vous verrez une alerte de bienvenue. C'est comme saluer vos invités en arrivant !

Événements de formulaire

Les formulaires sont où se produit la véritable interaction. C'est comme avoir une conversation avec vos utilisateurs.

Voici un tableau des événements de formulaire :

Événement	Description
onsubmit	Se déclenche lorsque le formulaire est soumis
onreset	Se déclenche lorsque le formulaire est réinitialisé
onchange	Se déclenche lorsque la valeur d'une entrée change
onfocus	Se déclenche lorsque l'élément reçoit le focus
onblur	Se déclenche lorsque l'élément perd le focus

Voyons un exemple :

<form onsubmit="alert('Formulaire soumis !'); return false;">
<input type="text" onchange="this.style.backgroundColor='jaune'">
<input type="submit" value="Soumettre">
</form>

Dans ce formulaire, lorsque vous changez l'entrée de texte, elle devient jaune (surprise !), et lorsque vous soumettez, vous obtenez une alerte. C'est comme si le formulaire vous répondait !

Événements clavier

Les événements clavier concernent ce qui se passe lorsque vos doigts dansent sur le clavier.

Voici un tableau des événements clavier :

Événement	Description
onkeydown	Se déclenche lorsque une touche est enfoncée
onkeyup	Se déclenche lorsque une touche est relâchée
onkeypress	Se déclenche lorsque une touche est enfoncée et relâchée

Essayons un exemple :

<input type="text" onkeypress="document.body.style.backgroundColor='bleu clair'">

Chaque fois que vous appuyez sur une touche dans cette entrée, le fond de la page devient bleu clair. C'est comme jouer du piano qui peint !

Événements souris

Les événements souris concernent les clics et les déplacements.

Voici un tableau des événements souris :

Événement	Description
onclick	Se déclenche lorsque un élément est cliqué
ondblclick	Se déclenche lorsque un élément est double-cliqué
onmouseover	Se déclenche lorsque la souris se déplace sur un élément
onmouseout	Se déclenche lorsque la souris quitte un élément

Voyons-les en action :

<button onclick="this.innerHTML='Cliqué !'"
onmouseover="this.style.color='rouge'"
onmouseout="this.style.color='noir'">
Cliquez-moi !
</button>

Ce bouton change de couleur lorsque vous le survolez et change de texte lorsque vous cliquez dessus. C'est comme un bouton caméléon !

Événements de glissement

Les événements de glissement rendent vos éléments déplacables, comme les pièces sur un échiquier.

Voici un tableau des événements de glissement :

Événement	Description
ondrag	Se déclenche lorsque un élément est glissé
ondragstart	Se déclenche lorsque l'utilisateur commence à glisser un élément
ondragend	Se déclenche lorsque l'utilisateur a fini de glisser l'élément

Voici un exemple simple :

<div draggable="true" ondragstart="alert('Glissement commencé !')">
Glissez-moi !
</div>

Lorsque vous commencez à glisser ce div, il vous alerte. C'est comme si l'élément disait, "Wouhou ! Je suis en train de voler !"

Événements du presse-papiers

Les événements du presse-papiers concernent la copie, le coupage et le collage.

Voici un tableau des événements du presse-papiers :

Événement	Description
oncopy	Se déclenche lorsque l'utilisateur copie du contenu
oncut	Se déclenche lorsque l'utilisateur coupe du contenu
onpaste	Se déclenche lorsque l'utilisateur colle du contenu

Voyons un exemple :

<textarea oncopy="alert('Copié !')" oncut="alert('Coupé !')" onpaste="alert('Collé !')">
Essayez de copier, couper ou coller ici !
</textarea>

Cette zone de texte vous dit lorsque vous effectuez des actions de presse-papiers. C'est comme avoir un bloc-notes bavard !

Événements média

Les événements média sont pour lorsque vous jouez de l'audio ou de la vidéo sur votre page.

Voici un tableau des événements média :

Événement	Description
onplay	Se déclenche lorsque le média commence à jouer
onpause	Se déclenche lorsque le média est en pause
onended	Se déclenche lorsque le média a atteint la fin

Voici un exemple rapide :

<audio src="song.mp3" controls onplay="alert('Profitez de la musique !')" onended="alert('J'espère que vous avez aimé !')"></audio>

Cet élément audio vous salue lorsque vous commencez à jouer et vous demande des retours lorsque cela se termine. C'est comme un DJ qui se soucie de votre avis !

Événements divers

Il y a beaucoup d'autres événements qui ne rentrent pas dans des catégories bien définies. Voici quelques-uns :

Événement	Description
onerror	Se déclenche lorsque une erreur se produit
oncontextmenu	Se déclenche lorsque l'utilisateur fait un clic droit
onwheel	Se déclenche lorsque la roulette de la souris est tournée

Voyons un en action :

<img src="image.jpg" onerror="this.src='default.jpg'">

Si l'image ne charge pas, elle est automatiquement remplacée par une image par défaut. C'est comme avoir un danseur de secours prêt à intervenir !

Et voilà, les amis ! Vous avez刚刚 fait vos premiers pas dans le monde des événements HTML. Souvenez-vous, la clé pour maîtriser les événements, c'est la pratique. Essayez de combiner différents événements, expérimentez avec de nouvelles idées, et surtout, amusez-vous !

Comme je le dis toujours à mes élèves, le codage, c'est comme cuisiner - vous pourriez faire un peu de pagaille au début, mais avec de la pratique, vous serez bientôt à créer des chefs-d'œuvre en un rien de temps. Alors, continuez à jouer avec ces événements et voyez vos pages web prennent vie !

Credits: Image by storyset

Tutoriel précédent:

HTML - Référence des attributs

Tutoriel suivant:

HTML - Référence des Polices