Gestion des événements en JavaScript

Articles

Cet article explique la gestion des événements en JavaScript.

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

Gestion des événements en JavaScript

La gestion des événements en JavaScript est un mécanisme permettant d'exécuter des actions spécifiques en réponse aux opérations de l'utilisateur (comme des clics ou des saisies clavier) ou aux actions du navigateur. En configurant des écouteurs d'événements, vous pouvez créer des pages web dynamiques et interactives.

Notions de base sur les événements

Les événements se produisent en réponse aux opérations des utilisateurs et aux actions du navigateur. Lorsqu'un événement se produit, le gestionnaire d'événement associé (fonction) est exécuté. Par exemple, il existe des événements comme les suivants :.

Clic (click)
Entrée clavier (keydown, keyup)
Mouvement de la souris (mousemove, mouseover)
Soumission de formulaire (submit)
Chargement de la page terminé (DOMContentLoaded)
Défilement (scroll)

Ajouter des écouteurs d'événements

Les écouteurs d'événements sont configurés à l'aide de la méthode addEventListener(). Cette méthode appelle une fonction spécifique lorsque l'événement spécifié se produit.

Syntaxe de base de `addEventListener()`

1element.addEventListener(event, handler);

element est l'élément HTML qui surveille l'événement.
event est le nom de l'événement (par exemple, click).
handler est la fonction qui est exécutée lorsque l'événement se produit.

Objet événement

Lorsqu'un événement se produit, JavaScript transmet un objet événement contenant les détails de l'événement au gestionnaire d'événements. Cet objet inclut des informations telles que l'élément qui a déclenché l'événement et la touche qui a été pressée.

Exemple : Utilisation de l'objet événement

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

Ce code utilise l'objet événement pour afficher des informations détaillées et l'élément cliqué dans la console lorsque le bouton est cliqué.

Événements typiques

Événement de clic

L'événement click se produit lorsque l'utilisateur clique sur un élément.

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

Ce code affiche un message dans la console lorsque l'élément est cliqué.

Événements clavier

Les événements keydown et keyup se produisent lorsque l'utilisateur appuie sur une touche ou la relâche. Vous pouvez utiliser event.key pour voir quelle touche a été pressée.

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

Ce code affiche le nom de la touche dans la console lorsque l'utilisateur appuie sur une touche.

Événements de la souris

Les événements mousemove et mouseover se produisent lors du mouvement de la souris et du survol.

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

Ce code affiche la position (coordonnées X et Y) dans la console chaque fois que la souris se déplace.

Événements de formulaire

Les événements liés aux formulaires incluent submit et input. L'événement submit se produit lorsqu'un formulaire est soumis et provoque généralement le rechargement de la page, mais event.preventDefault() est souvent utilisé pour l'éviter.

Exemple : Éviter le rechargement de la page lors de la soumission d'un formulaire

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

Ce code empêche la page de se recharger lors de la soumission du formulaire et affiche un message dans la console à la place.

Propagation des événements (bouillonnement et capture)

Les événements se propagent en deux étapes : la phase de capture, qui se déplace des éléments parents vers les éléments enfants, et la phase de bouillonnement, qui se déplace des éléments enfants vers les éléments parents.

Bouillonnement des événements

Par défaut, les événements se produisent sur l'élément le plus intérieur et se propagent vers l'extérieur. Ceci est appelé bouillonnement.

Exemple : Exemple de bouillonnement

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

Dans cet exemple, lorsque vous cliquez sur un bouton, l'événement du bouton se produit en premier, suivi de l'événement de l'élément parent.

Capture des événements

En spécifiant true comme troisième argument dans addEventListener(), vous pouvez gérer les événements dans la phase de capture.

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

Ce code gère l'événement de clic de l'élément parent pendant la phase de capture et affiche un message dans la console.

Prévention de la propagation avec `stopPropagation()`

Vous pouvez empêcher la propagation des événements en utilisant event.stopPropagation().

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

Ce code empêche la propagation de l'événement lorsque le bouton est cliqué et affiche un message dans la console.

Suppression des événements

Vous pouvez supprimer les écouteurs d'événements en utilisant removeEventListener(). Pour supprimer un écouteur d'événements, vous avez besoin d'une référence à la fonction spécifiée dans addEventListener().

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

Ce code supprime l'écouteur d'événement de clic du bouton afin qu'il ne soit plus géré lorsqu'il est cliqué.

Événements personnalisés

En JavaScript, vous pouvez créer et déclencher des événements personnalisés en plus des événements standard. Utilisez le constructeur CustomEvent.

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

Ce code crée et déclenche un événement personnalisé myCustomEvent et affiche ses détails dans la console.

Résumé

La gestion des événements est un élément essentiel pour renforcer l'interactivité des applications web. En utilisant les composants de la gestion des événements, vous pouvez offrir une expérience utilisateur plus flexible et sophistiquée.

Écouteur d'événements : Utilisez addEventListener() pour définir un gestionnaire d'événements sur un élément.
Objet de l'événement : Lorsqu'un événement se produit, un objet événement est transmis, pouvant être utilisé pour obtenir des informations détaillées.
Propagation des événements : Les événements se propagent en deux phases : boulonnement et capture.
Événements de formulaire et événements personnalisés : Vous pouvez gérer les soumissions de formulaires et vos propres événements personnalisés.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Shadow DOM en JavaScript

Gestion des événements en JavaScript

YouTube Video

Gestion des événements en JavaScript

Notions de base sur les événements

Ajouter des écouteurs d'événements

Syntaxe de base de addEventListener()

Objet événement

Exemple : Utilisation de l'objet événement

Événements typiques

Événement de clic

Événements clavier

Événements de la souris

Événements de formulaire

Exemple : Éviter le rechargement de la page lors de la soumission d'un formulaire

Propagation des événements (bouillonnement et capture)

Bouillonnement des événements

Exemple : Exemple de bouillonnement

Capture des événements

Prévention de la propagation avec stopPropagation()

Suppression des événements

Événements personnalisés

Résumé

YouTube Video

Syntaxe de base de `addEventListener()`

Prévention de la propagation avec `stopPropagation()`