Les Événements

Les événements permettent à JavaScript de réagir aux actions de l’utilisateur.

Par exemple :

• Un clic sur un bouton
• Une touche du clavier
• Un formulaire envoyé
• Un champ texte modifié
• Le déplacement de la souris

Les événements rendent les pages web interactives.

1. addEventListener()

La méthode addEventListener() permet d’écouter un événement.

const button = document.querySelector("button");

button.addEventListener("click", function() {

    console.log("Bouton cliqué");

});

Ici :

• button → élément surveillé
• click → événement
• function() → code exécuté

2. L’événement click

L’événement click se produit lorsqu’un utilisateur clique sur un élément.

const button = document.querySelector("button");

button.addEventListener("click", () => {

    console.log("Click détecté");

});

3. L’événement input

L’événement input se déclenche lorsqu’un champ change de valeur.

const input = document.querySelector("input");

input.addEventListener("input", () => {

    console.log(input.value);

});

Cet événement est très utilisé avec les formulaires.

4. L’événement submit

L’événement submit se produit lorsqu’un formulaire est envoyé.

const form = document.querySelector("form");

form.addEventListener("submit", () => {

    console.log("Formulaire envoyé");

});

5. preventDefault()

La méthode preventDefault() empêche le comportement par défaut du navigateur.

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {

    event.preventDefault();

    console.log("Envoi bloqué");

});

Sans preventDefault(), le navigateur recharge normalement la page après l’envoi du formulaire.

6. L’objet event

Lorsqu’un événement se produit, JavaScript crée automatiquement un objet event.

button.addEventListener("click", (event) => {

    console.log(event);

});

Cet objet contient plusieurs informations sur l’événement.

7. event.target

La propriété event.target représente l’élément qui a déclenché l’événement.

button.addEventListener("click", (event) => {

    console.log(event.target);

});

Cela permet de savoir quel élément a été cliqué.

8. keydown

L’événement keydown se produit lorsqu’une touche du clavier est pressée.

document.addEventListener("keydown", (event) => {

    console.log(event.key);

});

Ici, JavaScript affiche la touche utilisée.

9. mouseenter

L’événement mouseenter se déclenche lorsque la souris entre dans un élément.

const box = document.querySelector(".box");

box.addEventListener("mouseenter", () => {

    console.log("Souris détectée");

});

10. stopPropagation()

La méthode stopPropagation() empêche un événement de continuer sa propagation.

button.addEventListener("click", (event) => {

    event.stopPropagation();

});

Cette méthode est utile dans certaines interfaces complexes.

11. onclick vs addEventListener()

Avant, plusieurs projets utilisaient directement onclick dans le HTML.

<button onclick="sayHello()">

    Bonjour

</button>

Aujourd’hui, on préfère généralement addEventListener().

button.addEventListener("click", sayHello);

12. DOM + événements

Les événements deviennent puissants lorsqu’ils sont combinés au DOM.

const button = document.querySelector("button");

const message = document.querySelector("#message");

button.addEventListener("click", () => {

    message.textContent = "Bonjour Fred";

});

Ici :

• L’utilisateur clique
• JavaScript détecte l’événement
• Le DOM est modifié

Résumé rapide