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.

575 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
1 635 vues
Mixins : Créer des mixins pour réutiliser des blocs de styles
Mixins en SASS : Créer et Utiliser1. Déclaration de mixins :En SASS, les mixins sont déclarés à l'aide du mot-clé @mixin, suivi du nom du mixin et des paramètres entre parenthèses. Les styles...
Sass
2 983 vues
Afficher ses utilisateurs en PHP
Maintenant que nous avons créé notre formulaire d’inscription et de connexion nous allons afficher tous nos utilisateurs du site afin de visiter par la suite les autres profils du site.
Créer son site de rencontres
2 028 vues
Définition des caractéristiques de la base de données : le nom, le jeu de caractères, etc.
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
4 194 vues
Ajout d'images avec <img> et attributs src, alt et width
Ajout d'images avec <img> et attributs src, alt et widthLa balise <img> est utilisée pour afficher des images dans une page HTML. Elle nécessite l'utilisation de certains attributs pour...
HTML
6 150 vues
Créer son forum
Après avoir terminer les articles pour développer votre site de A à Z maintenant nous allons nous attaquer à la création d'un forum complet !Pour commencer nous allons...
Créer son site
339 vues
Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellules
Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellulesDans un tableau HTML, la balise <tr> est utilisée pour définir chaque ligne du tableau,...
HTML
298 vues
Boucles (for, while, do-while, foreach)
Les boucles en PHP permettent d'exécuter un bloc de code plusieurs fois, en fonction d'une condition spécifiée. Les principales boucles en PHP sont for, while, do-while et foreach. Voici un cours...
PHP
3 180 vues
Faire une demande d'ami
Maintenant que notre base de données est créée, nous allons nous attaquer à la partie visuelle de notre système d'amis.Pour commencer nous allons créer notre formulaire pour faire une demande...
Créer son site
Publicité
Cette pub permet au site de vivre ...