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.

768 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
662 vues
Propriétés CSS : comprendre les différentes propriétés et leurs valeurs
Propriétés CSS : Comprendre les différentes propriétés et leurs valeursLes propriétés CSS sont des instructions qui contrôlent l'apparence et le comportement des éléments HTML sur une page...
CSS
656 vues
Syntaxe de base : balises PHP, commentaires
Introduction à la syntaxe de base en PHPPHP utilise une syntaxe simple et flexible pour écrire du code côté serveur. Commençons par explorer les balises PHP et les commentaires, deux éléments...
PHP
3 938 vues
Afficher son article
Afficher son articleNous allons créer une nouvelle page que l'on nommera voir_article.php. Cette page affichera tous les articles qui constituerons notre blog.Nous allons modifier notre...
Créer son site
1 639 vues
Afficher les messages dans l'ordre
Dans cette vidéo on va personnaliser (un peu) l'interface des conversations avec du CSS.Nous allons également remettre les messages dans l'ordre et lors de la réception du message par le...
Créer son site de rencontres
498 vues
Utilisation des attributs id et class pour identifier et styler les éléments
Utilisation des attributs id et class pour identifier et styler les élémentsLes attributs id et class sont utilisés pour identifier et styler les éléments HTML en leur attribuant des...
HTML
3 484 vues
Voir le profil d'un utilisateur en PHP
Maintenant que nous avons la liste des utilisateurs, nous allons créer une nouvelle page PHP afin de visiter le profil d'un membre dynamiquement.Pour cela nous allons passer dans l'URL l'identifiant...
Créer son site de rencontres
392 vues
Comment ces propriétés affectent le positionnement et la mise en page des éléments
Impact des Propriétés de Marge, Bordure, Rembourrage, Largeur et Hauteur sur le Positionnement et la Mise en Page des ÉlémentsEn CSS, les propriétés de marge, bordure, rembourrage, largeur et...
CSS
256 vues
Modification du contenu et des styles
Modification du Contenu et des Styles des Éléments HTML en JavaScriptLa modification du contenu et des styles des éléments HTML est une tâche courante en développement web. Cela permet de...
JS
Publicité
Cette pub permet au site de vivre ...