JavaScript - Événements DOM : Un Guide Pour Débutants

Salut à toi, futur.e magicien.ne du codage ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des événements DOM de JavaScript. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je serai ton guide amical, et nous explorerons ce sujet fascinant ensemble. Alors, prends une tasse de ta boisson favorite, installe-toi confortablement, et plongeons dedans !

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

Avant de nous plonger dans des types d'événements spécifiques, comprenons ce qu'est un événement DOM. Imagine que tu es à une fête (une fête de codage, bien sûr !). Chaque fois que quelque chose se passe - quelqu'un arrive, une chanson change, ou quelqu'un renverse son verre - c'est un "événement". Dans le monde du développement web, les événements DOM sont similaires. Ce sont des choses qui arrivent aux éléments HTML sur une page web, comme un bouton cliqué ou la souris qui survole une image.

Maintenant, explorons quelques types communs d'événements et comment les utiliser !

Le type d'événement onclick

L'événement onclick est probablement le type d'événement le plus commun que tu rencontreras. Il se produit lorsque l'utilisateur clique sur un élément HTML. Voici un exemple simple :

<button id="myButton">Clique-moi !</button>

<script>
document.getElementById("myButton").onclick = function() {
alert("Tu as cliqué sur le bouton !");
}
</script>

Dans cet exemple, nous avons un bouton avec l'ID "myButton". Le code JavaScript sélectionne ce bouton en utilisant document.getElementById("myButton"), puis affecte une fonction à sa propriété onclick. Lorsque le bouton est cliqué, il déclenche une alerte disant "Tu as cliqué sur le bouton !"

Astuce pro : Essaie ce code toi-même ! Crée un fichier HTML, colle ceci dedans, et ouvre-le dans ton navigateur. C'est toujours plus amusant de voir les choses en action !

Le type d'événement ondblclick

Que se passe-t-il si nous voulons que quelque chose se produise lorsque l'utilisateur effectue un double-clic ? C'est là que l'événement ondblclick devient utile. Voici un exemple :

<p id="myParagraph">Double-clique-moi pour changer ma couleur !</p>

<script>
document.getElementById("myParagraph").ondblclick = function() {
this.style.color = "rouge";
}
</script>

Dans ce cas, lorsque tu double-cliques sur le paragraphe, sa couleur de texte change en rouge. Le mot-clé this se réfère à l'élément qui a déclenché l'événement (dans ce cas, le paragraphe).

Le type d'événement onkeydown

Passons aux événements clavier. L'événement onkeydown est déclenché lorsque une touche du clavier est enfoncée. Voici un exemple amusant :

<input id="myInput" type="text">
<p id="output"></p>

<script>
document.getElementById("myInput").onkeydown = function(event) {
document.getElementById("output").innerHTML = "Tu as pressé : " + event.key;
}
</script>

Ce code crée un champ de saisie et un paragraphe. Chaque fois que tu appuies sur une touche lorsque le champ de saisie est focusé, le paragraphe est mis à jour pour montrer quelle touche tu as pressée. L'objet event contient des informations sur l'événement, y compris quelle touche a été pressée (event.key).

Les événements onmouseenter et onmouseleave

Ces événements sont comme un jeu de cache-cache avec ton curseur de souris ! onmouseenter est déclenché lorsque le pointeur de la souris entre dans un élément, et onmouseleave lorsque il quitte. Voyons-les en action :

<div id="myBox" style="width: 200px; height: 200px; background-color: jaune;">
Passe ta souris sur moi !
</div>

<script>
let box = document.getElementById("myBox");

box.onmouseenter = function() {
this.style.backgroundColor = "vert";
this.innerHTML = "Salut là-bas !";
}

box.onmouseleave = function() {
this.style.backgroundColor = "jaune";
this.innerHTML = "Passe ta souris sur moi !";
}
</script>

Cela crée une boîte jaune qui change de couleur et te salue lorsque tu passes ta souris dessus, puis revient à l'original lorsque ta souris quitte. C'est comme si la boîte était timide et ne voulait dire bonjour que lorsque tu es proche !

Événements standards HTML 5

HTML5 a introduit un tas de nouveaux événements standards. Jetons un œil à quelques-uns des intéressants :

L'événement onDrag

<div id="dragMe" draggable="true" style="width: 100px; height: 100px; background-color: bleu;">
Fais-moi glisser !
</div>
<div id="dropZone" style="width: 200px; height: 200px; border: 2px dashed noir;">
Dépose ici !
</div>

<script>
let dragElement = document.getElementById("dragMe");
let dropZone = document.getElementById("dropZone");

dragElement.ondragstart = function(event) {
event.dataTransfer.setData("text", event.target.id);
}

dropZone.ondragover = function(event) {
event.preventDefault();
}

dropZone.ondrop = function(event) {
event.preventDefault();
let data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>

Cet exemple démontre la fonctionnalité de glisser-déposer. Tu peux glisser la boîte bleue et la déposer dans la zone à rebords noirs. Il utilise plusieurs événements : ondragstart, ondragover, et ondrop.

Les événements onOnline et onOffline

Ces événements sont déclenchés lorsque le navigateur détecte que la connexion internet est établie ou perdue :

<p id="status">Ton statut de connexion apparaîtra ici.</p>

<script>
window.addEventListener("online", function() {
document.getElementById("status").innerHTML = "Tu es de retour en ligne !";
});

window.addEventListener("offline", function() {
document.getElementById("status").innerHTML = "Oups, tu es hors ligne.";
});
</script>

Ce script met à jour un paragraphe pour te dire si tu es en ligne ou hors ligne. Essaie-le en désactivant ton Wi-Fi !

Résumé des types d'événements

Voici un tableau pratique résumant les types d'événements que nous avons discutés :

Type d'événement	Description	Exemple d'utilisation
onclick	Déclenché lorsque un élément est cliqué	Clics de bouton, bascule d'éléments
ondblclick	Déclenché lorsque un élément est double-cliqué	Ouvrir/fermer des panneaux, zoomer/dézoomer
onkeydown	Déclenché lorsque une touche est enfoncée	Validation de formulaires, raccourcis clavier
onmouseenter	Déclenché lorsque la souris entre dans un élément	Afficher des infobulles, surligner des éléments
onmouseleave	Déclenché lorsque la souris quitte un élément	Cacher des infobulles, réinitialiser les styles des éléments
ondragstart	Déclenché lorsque un élément commence à être glissé	Initiations des opérations de glisser-déposer
ondrop	Déclenché lorsque un élément glissé est déposé	Finalisation des opérations de glisser-déposer
online	Déclenché lorsque le navigateur détecte une connexion internet	Mise à jour de l'interface utilisateur pour le statut en ligne
offline	Déclenché lorsque le navigateur détecte une perte de connexion internet	Mise à jour de l'interface utilisateur pour le statut hors ligne

Et voilà, les amis ! Nous avons fait un voyage à travers le pays des événements DOM de JavaScript, des clics simples aux magies de glisser-déposer. Souviens-toi, la meilleure façon d'apprendre est de faire, donc n'hesite pas à expérimenter avec ces exemples et à créer les tiens. Qui sait ? Tu pourrais juste construire la prochaine grande application web interactive !

Bonne programmation, et que tes événements soient toujours traités avec grâce !

Credits: Image by storyset