JavaScript - Événements de la Souris

Salut à toi, futur(e) programmeur(euse) ! Aujourd'hui, nous allons plonger dans le monde fascinant des événements de souris en JavaScript. En tant que ton enseignant bienveillant de quartier, je suis excité de t'accompagner dans cette aventure. Fais-moi confiance, à la fin de ce tutoriel, tu manipuleras les événements de souris comme un pro !

Événements de Souris Courants

Avant de nous lancer dans le code, penchons-nous sur certains des événements de souris les plus courants en JavaScript. Pense à eux comme à différentes manières dont ton ordinateur comprend comment tu interagis avec ta souris :

Événement	Description
click	Se produit lorsque la souris clique sur un élément
dblclick	Se produit lorsque la souris effectue un double-clic sur un élément
mousedown	Se produit lorsque un bouton de la souris est pressé sur un élément
mouseup	Se produit lorsque un bouton de la souris est relâché au-dessus d'un élément
mousemove	Se produit lorsque le pointeur de la souris se déplace mientras il est au-dessus d'un élément
wheel	Se produit lorsque la roulette de la souris est faites tourner vers le haut ou vers le bas sur un élément

Maintenant, explorons chacun de ces événements avec quelques exemples pratiques !

Exemple : Événement Click

Commençons par l'événement le plus basique et le plus couramment utilisé : l'événement click.

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

<script>
let button = document.getElementById('myButton');

button.addEventListener('click', function() {
alert('Bouton cliqué !');
});
</script>

Dans cet exemple, nous disons à JavaScript d'écouter un clic sur notre bouton. Lorsqu'il entend ce clic (comme un chien entendant un sifflet), il passe à l'action et affiche une alerte.

Voici ce qui se passe étape par étape :

1. Nous obtenons notre bouton en utilisant document.getElementById('myButton').
2. Nous ajoutons un écouteur d'événement au bouton en utilisant addEventListener.
3. Nous lui disons d'écouter un événement 'click'.
4. Lorsqu'un clic se produit, il exécute la fonction que nous avons fournie, qui affiche une alerte.

Essayez-le ! C'est comme de la magie, mais c'est en réalité juste JavaScript qui fait son travail.

Exemple : Événement Double Click

Maintenant, augmentons la difficulté avec un événement double clic. C'est comme un clic, mais deux fois plus sympa !

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

<script>
let paragraph = document.getElementById('myParagraph');

paragraph.addEventListener('dblclick', function() {
this.style.color = getRandomColor();
});

function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>

Dans cet exemple amusant, un double-clic sur le paragraphe change sa couleur en une couleur aléatoire. C'est comme un caméléon, mais plus cool car c'est toi qui es en contrôle !

La fonction getRandomColor est notre petit magicien de couleur. Il génère une couleur aléatoire chaque fois qu'il est appelé. Ne t'inquiète pas trop de son fonctionnement interne pour l'instant - sache simplement qu'il nous donne une couleur aléatoire.

Exemple : Événements Mouse Down et Mouse Up

Maintenant, regardons les événements mousedown et mouseup. Ce sont comme le yin et le yang des événements de souris.

<div id="myBox" style="width: 100px; height: 100px; background-color: bleu;"></div>

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

box.addEventListener('mousedown', function() {
this.style.backgroundColor = 'rouge';
});

box.addEventListener('mouseup', function() {
this.style.backgroundColor = 'bleu';
});
</script>

Dans cet exemple, notre boîte devient rouge lorsque vous pressez le bouton de la souris dessus, et redevient bleue lorsque vous relâchez le bouton. C'est comme l'un de ces jouets anti-stress, mais en version numérique !

Exemple : Événement Mouse Move

L'événement mousemove est déclenché chaque fois que la souris se déplace sur un élément. C'est comme suivre une souris dans un labyrinthe, mais moinsfromageux.

<div id="mouseTracker" style="width: 300px; height: 200px; border: 1px solid noir;">
<p>Déplace ta souris içi !</p>
<p id="coordinates"></p>
</div>

<script>
let tracker = document.getElementById('mouseTracker');
let coordDisplay = document.getElementById('coordinates');

tracker.addEventListener('mousemove', function(event) {
let x = event.clientX - tracker.offsetLeft;
let y = event.clientY - tracker.offsetTop;
coordDisplay.textContent = `X: ${x}, Y: ${y}`;
});
</script>

Cet exemple crée une petite zone de suivi de souris. Lorsque vous déplacez votre souris à l'intérieur de la boîte, elle affiche les coordonnées. C'est comme si vous étiez le capitaine d'un petit vaisseau de souris, naviguant à travers une mer de pixels !

Exemple : Événement Wheel

Enfin, regardons l'événement wheel. Cet événement est déclenché lorsque vous utilisez la roulette de la souris.

<div id="wheelDemo" style="width: 200px; height: 200px; background-color: jaune; overflow: auto;">
<p style="height: 1000px;">Fais-moi défiler avec la roulette de la souris !</p>
</div>

<script>
let wheelArea = document.getElementById('wheelDemo');

wheelArea.addEventListener('wheel', function(event) {
event.preventDefault(); // Empêche le comportement de défilement par défaut

this.scrollTop += event.deltaY;

if (this.scrollTop > 0) {
this.style.backgroundColor = `rgb(255, ${255 - this.scrollTop}, 0)`;
}
});
</script>

Dans cet exemple, lorsque vous faites défiler la roulette, la couleur d'arrière-plan change de jaune à rouge. C'est comme un coucher de soleil, mais vous le contrôlez avec votre roulette de souris !

L'event.deltaY nous donne la quantité de défilement vertical. Nous utilisons cela pour faire défiler le contenu et changer la couleur.

Et voilà, les amis ! Nous avons fait le tour du pays des événements de souris en JavaScript. Souviens-toi, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces événements. Avant de savoir, vous créerez des expériences web interactives qui feront dire à vos utilisateurs "Wow, comment ont-ils fait ça ?"

Bonne programmation, et que votre souris clique toujours juste !

Credits: Image by storyset