JS

Gestion des événements : click, submit, keydown, etc.

Gestion des Événements en JavaScript


La gestion des événements en JavaScript permet d'interagir avec les actions de l'utilisateur sur une page web, telles que les clics de souris, les soumissions de formulaires, les pressions de touches, etc.


1. Ajout d'Écouteurs d'Événements :


Vous pouvez ajouter des écouteurs d'événements à des éléments HTML en utilisant la méthode addEventListener. Cette méthode prend en premier argument le type de l'événement à écouter et en second argument une fonction de rappel (callback) qui sera exécutée lorsque l'événement se produit.


Exemple d'Ajout d'Écouteur d'Événement "click" :


// Sélection de l'élément sur lequel ajouter l'écouteur d'événement
let monElement = document.getElementById('monElement');

// Ajout de l'écouteur d'événement "click"
monElement.addEventListener('click', function() {
    console.log('L\'élément a été cliqué.');
});


2. Types d'Événements Courants :


  • click : Événement déclenché lorsque l'utilisateur clique sur un élément.
  • submit : Événement déclenché lorsqu'un formulaire est soumis.
  • keydown, keyup : Événements déclenchés lorsqu'une touche du clavier est enfoncée ou relâchée.
  • mouseover, mouseout : Événements déclenchés lorsque la souris survole un élément ou quitte un élément.
  • focus, blur : Événements déclenchés lorsque l'élément reçoit ou perd le focus.


Exemple d'Ajout d'Écouteur d'Événement "submit" sur un Formulaire :


// Sélection du formulaire sur lequel ajouter l'écouteur d'événement
let formulaire = document.getElementById('monFormulaire');

// Ajout de l'écouteur d'événement "submit"
formulaire.addEventListener('submit', function(event) {
    // Empêche le comportement par défaut du formulaire
    event.preventDefault();
    
    // Traitement du formulaire ici
});


3. Utilisation de Fonctions de Rappel :


Les fonctions de rappel utilisées comme écouteurs d'événements peuvent accepter un argument event, qui représente l'objet Event associé à l'événement déclenché. Cet objet contient des informations sur l'événement, telles que le type, la cible, les touches de clavier, etc.


Exemple d'Utilisation de l'Objet Event :


monElement.addEventListener('click', function(event) {
    console.log('L\'élément a été cliqué.');
    console.log('Type de l\'événement : ' + event.type);
    console.log('Cible de l\'événement : ' + event.target);
});


4. Retrait d'Écouteurs d'Événements :


Vous pouvez retirer des écouteurs d'événements en utilisant la méthode removeEventListener. Il est important de spécifier la même fonction de rappel que celle utilisée lors de l'ajout de l'écouteur.


Exemple de Retrait d'Écouteur d'Événement :


function handleClick() {
    console.log('L\'élément a été cliqué.');
}

monElement.addEventListener('click', handleClick);

// Retrait de l'écouteur d'événement
monElement.removeEventListener('click', handleClick);


En résumé, la gestion des événements en JavaScript permet d'interagir avec les actions de l'utilisateur sur une page web. En comprenant comment ajouter des écouteurs d'événements, utiliser des fonctions de rappel et manipuler les objets Event, vous pouvez créer des expériences web dynamiques et réactives.

763 vues
Posté le 04 avril 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
16 147 vues
Première page (index.php)
Pour commencer à développer notre site nous avons besoin de créer une nouvelle page que l'on appellera index.php. Cette page fera office de page d'accueil car lorsque vous allez...
Créer son site
1 997 vues
Charger automatiquement les messages
Après avoir amélioré l'envoi de nos messages nous allons également améliorer le système de recharge automatique pour l’affichage de nouveau message.
Créer son site de rencontres
3 202 vues
Comprendre le rôle de CSS dans la conception Web.
Le rôle de CSS dans la conception WebCSS, ou Cascading Style Sheets, est un langage de style utilisé pour définir la présentation visuelle des pages Web. Il agit comme une couche de style qui...
CSS
294 vues
Passage de paramètres
Passage de Paramètres dans les Fonctions en JavaScriptLorsque vous appelez une fonction en JavaScript, vous pouvez lui transmettre des valeurs en utilisant des paramètres. Ces paramètres sont des...
JS
418 vues
Comparaison avec d'autres langages de programmation
Comparaison de JavaScript avec d'autres langages de programmationJavaScript est un langage de programmation unique avec ses propres caractéristiques et particularités. Comprendre comment il se...
JS
1 432 vues
Voir plus de messages (1/2)
Dans cette nouvelle vidéo nous allons ajouter un bouton 'voir plus' qui va nous permettre de voir d'anciens messages. Nous allons commencer par mettre en place le bouton suivi du procédé pour voir...
Créer son site de rencontres
312 vues
Déclaration de fonctions
Déclaration de Fonctions en JavaScriptEn JavaScript, les fonctions sont des blocs de code réutilisables qui peuvent être appelés pour effectuer une tâche spécifique. Elles peuvent prendre des...
JS
3 775 vues
Différencier HTML (structure) de CSS (présentation)
Différencier HTML (structure) de CSS (présentation)HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils...
CSS
Publicité
Cette pub permet au site de vivre ...