Comprendre les Événements DOM

Objectifs de la Section

  • Identifier les différents types d'événements dans le DOM.
  • Expliquer le flux d'événements : capture et bubbling.

Contenu

  1. Introduction aux Événements DOM

    • Définition et rôle des événements dans les interactions web.
    • Exemples d'événements communs : click, keydown, load.

  2. Flux d'Événements : Capture et Bubbling

    • Explication du chemin que prend un événement à travers l'arbre DOM, du nœud racine jusqu'à l'élément ciblé et retour.
    • Importance de la phase de capture vs bubbling pour la gestion des événements.

Section 2 : Gestion des Événements DOM

Objectifs de la Section

  • Pratiquer l'ajout de gestionnaires d'événements aux éléments.
  • Comprendre comment retirer des gestionnaires d'événements pour éviter les fuites de mémoire.

Contenu

  1. Ajout de Gestionnaires d'Événements

    • Utilisation de addEventListener pour attacher un événement à un élément.
    • Exemple d'ajout d'un écouteur pour un événement de clic.

  2. Suppression de Gestionnaires d'Événements

    • Utilisation de removeEventListener pour retirer un gestionnaire d'événement.
    • Scénarios où il est nécessaire de retirer des écouteurs pour optimiser les performances.

Exemples Pratiques

Exemple 1 : Gestion d'un Événement de Clic

Code HTML :

 

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

Code JavaScript :

document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('clickButton');
    button.addEventListener('click', function(event) {
        alert('Bouton cliqué!');
    });
});
Explication :
  • Initialisation : Une fois que le contenu DOM est chargé, le script récupère la référence du bouton.
  • Ajout d'un écouteur d'événement : Un gestionnaire d'événements click est attaché au bouton. Lorsque le bouton est cliqué, une alerte est déclenchée.
  • Réactivité : Cela montre comment interagir avec les utilisateurs en répondant à leurs actions, ici par un simple clic.

Exemple 2 : Utilisation des Événements de Clavier

Code HTML :

<input type="text" id="inputField" placeholder="Tapez quelque chose">

Code JavaScript :

document.getElementById('inputField').addEventListener('keydown', function(event) {
    console.log(`Touche pressée : ${event.key}`);
});

Explication :

  • Écoute d'événements de clavier : L'événement keydown est utilisé pour détecter quand une touche est enfoncée dans le champ de saisie.
  • Réaction en temps réel : À chaque frappe, la touche pressée est enregistrée et affichée dans la console, démontrant une interaction interactive basée sur les entrées de l'utilisateur.


Exemple pratique 1

Créons un exemple pratique et amusant qui illustre l'utilisation des événements DOM : un jeu simple où l'utilisateur doit attraper un bouton qui se déplace aléatoirement sur la page lorsqu'on essaie de cliquer dessus. C'est un excellent moyen de montrer comment manipuler les styles CSS via JavaScript et d'interagir avec les événements de la souris.

Code HTML
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Jeu Attrape-moi si tu peux</title>
    <style>
        #movingButton {
            position: absolute;
            width: 100px;
            height: 50px;
            background-color: blue;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="movingButton">Clique-moi !</button>
    <script src="script.js"></script>
</body>
</html>
Code JavaScript (script.js)
document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('movingButton');
    const maxX = window.innerWidth - 100; // 100 est la largeur du bouton
    const maxY = window.innerHeight - 50; // 50 est la hauteur du bouton

    button.addEventListener('mouseover', function() {
        // Génère une nouvelle position aléatoire pour le bouton
        const newX = Math.random() * maxX;
        const newY = Math.random() * maxY;

        // Déplace le bouton à la nouvelle position
        button.style.left = `${newX}px`;
        button.style.top = `${newY}px`;
    });
});

Explication du Code

  1. Initialisation : Le script attend que le contenu DOM soit chargé pour s'assurer que tous les éléments HTML sont accessibles.
  2. Styles CSS : Le bouton est stylisé pour être visible, avec une position absolue pour permettre le déplacement sur toute la surface de la page.
  3. Événement mouseover : Un gestionnaire d'événements est attaché à l'événement mouseover du bouton. Cela signifie que chaque fois que l'utilisateur passe la souris sur le bouton, l'événement se déclenche.
  4. Calcul des positions : Les nouvelles positions horizontale (newX) et verticale (newY) sont calculées de manière aléatoire. Les limites maxX et maxY assurent que le bouton ne sort pas de l'écran.
  5. Mise à jour des styles : Les propriétés left et top du bouton sont mises à jour pour le déplacer vers les nouvelles positions calculées.

Ce jeu simple montre comment les événements DOM peuvent être utilisés pour créer des interactions dynamiques et engageantes sur une page web, rendant l'expérience utilisateur plus interactive.

 

Exercice pour le "Jeu Attrape-moi si tu peux"

Objectif : Améliorer le jeu en ajoutant une fonctionnalité de score qui compte combien de fois l'utilisateur a réussi à cliquer sur le bouton avant qu'il ne se déplace.

Exercice :

  1. Ajoutez un compteur de score qui s'incrémente chaque fois que l'utilisateur clique sur le bouton.
  2. Affichez le score dans un élément HTML séparé.
  3. Réinitialisez le score à zéro lorsque l'utilisateur recharge la page.

Exemple pratique 2

Voici un exemple pratique pour illustrer l'utilisation des événements DOM dans une application web, où une information apparaît après un délai, tourne dans les coins de la page si on ne clique pas dessus, et disparaît lorsqu'on clique deux fois dessus.

Code HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Notification Interactive</title>
    <style>
        #infoBox {
            position: fixed;
            width: 200px;
            height: 100px;
            background-color: lightblue;
            color: black;
            padding: 10px;
            display: none;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="infoBox">Cliquez deux fois pour fermer cette notification !</div>
    <script src="script.js"></script>
</body>
</html>

Code JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const infoBox = document.getElementById('infoBox');
    let positionIndex = 0; // Pour suivre la position actuelle de la boîte d'information
    const positions = [
        { right: '10px', top: '10px' },
        { right: '10px', bottom: '10px' },
        { left: '10px', bottom: '10px' },
        { left: '10px', top: '10px' }
    ];

    // Fait apparaître la boîte d'information après un délai
    setTimeout(() => {
        infoBox.style.display = 'block';
        moveToNextCorner();
    }, 5000); // Apparaît après 5 secondes

    // Définit le comportement du clic
    infoBox.addEventListener('dblclick', function() {
        infoBox.style.display = 'none';
    });

    // Déplace la boîte d'information dans les coins de la page
    function moveToNextCorner() {
        infoBox.style.right = '';
        infoBox.style.left = '';
        infoBox.style.top = '';
        infoBox.style.bottom = '';

        // Applique les styles pour le coin courant
        Object.assign(infoBox.style, positions[positionIndex]);
        
        // Prépare l'index pour le prochain coin
        positionIndex = (positionIndex + 1) % positions.length;

        // Continue à déplacer la boîte toutes les 4 secondes
        setTimeout(moveToNextCorner, 4000);
    }
});

Explication du Code

  1. Structure HTML : Un div est utilisé pour afficher la notification. Il est initialement caché (display: none) et positionné en utilisant position: fixed pour pouvoir le placer spécifiquement sur la page.

  2. Styles CSS : Le div de la notification est stylisé pour être visible et attrayant, avec une couleur de fond, une ombre portée, et un arrondi des bords.

  3. JavaScript :

    • Initialisation : Après le chargement du DOM, on récupère l'élément de la boîte d'information.
    • Apparition avec délai : Un setTimeout est utilisé pour faire apparaître la notification après un délai de 5 secondes.
    • Gestion des clics : Un gestionnaire pour l'événement dblclick permet de cacher la notification lorsque l'utilisateur clique deux fois dessus.
    • Déplacement périodique : La fonction moveToNextCorner déplace la notification dans les quatre coins de la page toutes les 4 secondes, créant un effet de mouvement si l'utilisateur ne clique pas pour fermer.

Cette application interactive illustre comment combiner les événements DOM avec des setTimeout et des manipulations CSS pour créer des interactions utilisateurs dynamiques et engageantes.

Exercice pour la "Notification Interactive"

Objectif : Ajouter une fonctionnalité pour que la notification s'arrête de se déplacer après un certain nombre de clics, indiquant que l'utilisateur a "attrapé" la notification.

Exercice :

  1. Modifiez le code pour que la notification cesse de se déplacer après que l'utilisateur a cliqué dessus cinq fois.
  2. Ajoutez un message indiquant que la notification a été attrapée et ne bougera plus.

 

 
Modifié le: mercredi 15 mai 2024, 09:22