JavaScript - Introduction to Events

Bonjour là-bas, futurs magiciens JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte du monde des événements JavaScript. En tant que votre enseignant en informatique bienveillant du quartier, je suis ravi de vous guider à travers ce concept fondamental qui va insuffler la vie dans vos pages web. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongons dedans !

Qu'est-ce qu'un Événement ?

Imaginez que vous êtes à une fête (une fête de codage, bien sûr !). Chaque fois qu'il se passe quelque chose - quelqu'un arrive, une chanson commence à jouer, ou quelqu'un renverse son verre - c'est un événement. Dans le monde du JavaScript, les événements fonctionnent de manière similaire. Ce sont des choses qui se passent sur votre page web que JavaScript peut détecter et auxquelles il peut répondre.

Les événements peuvent être déclenchés par :

• Des actions de l'utilisateur (cliquer sur un bouton, déplacer la souris)
• Des activités du navigateur (fin de chargement d'une page)
• Des changements dans l'état des éléments de la page

Voici un exemple simple pour illustrer ce concept :

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

<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Bouton cliqué !");
});
</script>

Dans cet exemple, cliquer sur le bouton (l'événement) fait apparaître une alerte (la réponse). C'est comme dire : "Hey JavaScript, quand quelqu'un clique sur ce bouton, montre ce message !"

Gestionnaires d'Événements JavaScript

Maintenant que nous comprenons ce qu'est un événement, parlons de la manière de les gérer. Les gestionnaires d'événements sont des fonctions JavaScript qui s'exécutent lorsqu'un événement se produit. Ils sont comme les videurs de notre fête de codage, décident ce qui se passe lorsque chaque événement se produit.

Il y a plusieurs façons d'attribuer des gestionnaires d'événements en JavaScript. Explorons-les :

1. Gestionnaires d'Événements Inline

C'est la manière la plus simple (mais pas toujours la meilleure) de gérer les événements :

<button onclick="alert('Bonjour, le Monde !')">Cliquez-moi</button>

Ici, le gestionnaire d'événements est écrit directement dans le HTML. Lorsque le bouton est cliqué, il affiche une alerte. Bien que cela soit facile à comprendre, ce n'est généralement pas recommandé pour les applications plus grandes car cela mélange HTML et JavaScript.

2. Gestionnaires d'Événements Propriété

Une meilleure approche est de séparer votre JavaScript de votre HTML :

<button id="myButton">Cliquez-moi</button>

<script>
document.getElementById("myButton").onclick = function() {
alert("Bonjour du gestionnaire d'événements propriété !");
};
</script>

Cette méthode affecte une fonction à la propriété onclick du bouton. C'est plus propre, mais il a une limitation : vous ne pouvez affecter qu'un seul gestionnaire par événement de cette manière.

3. Méthode addEventListener()

C'est la manière la plus flexible et puissante de gérer les événements :

<button id="myButton">Cliquez-moi</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Bonjour de addEventListener !");
});
</script>

Avec addEventListener(), vous pouvez :

• Attacher plusieurs gestionnaires d'événements à un seul élément
• Supprimer facilement les gestionnaires d'événements lorsque cela est nécessaire
• Avoir plus de contrôle sur le moment où le listener est activé dans le cycle de vie de l'événement

Regardons un exemple plus complexe :

<button id="myButton">Cliquez-moi</button>

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

function changeColor() {
this.style.backgroundColor = "rouge";
}

function addBorder() {
this.style.border = "2px solide bleu";
}

button.addEventListener("click", changeColor);
button.addEventListener("click", addBorder);
</script>

Dans cet exemple, cliquer sur le bouton change sa couleur en rouge ET ajoute une bordure bleue. Deux gestionnaires pour un seul événement !

Objet Événement JavaScript

Lorsqu'un événement se produit, JavaScript crée un objet Événement. Cet objet contient des détails sur l'événement, comme où il s'est produit, quel type d'événement il était, et parfois, des informations supplémentaires spécifiques à ce type d'événement.

Regardons un exemple :

<button id="myButton">Cliquez-moi</button>

<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("Type d'événement : " + event.type);
console.log("Élément cible : " + event.target.tagName);
console.log("Position X de la souris : " + event.clientX);
console.log("Position Y de la souris : " + event.clientY);
});
</script>

Lorsque vous cliquez sur le bouton, ce script enregistre des informations sur l'événement de clic, y compris :

• Le type d'événement ("click")
• L'élément qui a été cliqué (un élément "BUTTON")
• Les coordonnées X et Y de la souris au moment du clic

Ces informations peuvent être incroyablement utiles pour créer des applications web interactives et réactives.

Voici un tableau récapitulatif de certaines propriétés courantes de l'objet Événement :

Propriété	Description
type	Le type d'événement (par exemple, "click", "mouseover")
target	L'élément qui a déclenché l'événement
clientX, clientY	Les coordonnées horizontale et verticale du pointeur de la souris
keyCode	Le code de la touche pressée (pour les événements clavier)
preventDefault()	Une méthode pour empêcher l'action par défaut de l'événement
stopPropagation()	Une méthode pour empêcher l'événement de remonter dans l'arbre DOM

Souvenez-vous, différents types d'événements peuvent avoir des propriétés spécifiques supplémentaires. Vérifiez toujours la documentation pour la liste complète des propriétés disponibles pour chaque type d'événement.

En conclusion, les événements sont le pouls des applications web interactives. Ils permettent à votre JavaScript de répondre aux actions des utilisateurs et de créer des expériences dynamiques et engageantes. Alors que vous continuez votre voyage en JavaScript, vous vous retrouverez à travailler de plus en plus avec les événements. Adoptez-les, expérimentez avec eux, et voyez vos pages web prendre vie !

Bonne programmation, futurs ninjas JavaScript ! ??

Credits: Image by storyset