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.

531 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 405 vues
Personnaliser ses conversations
Dans cette dernière vidéo nous allons personnaliser notre messagerie ! 😎Pour cela nous allons donner l’aspect des conversations comme une messagerie de smartphone type Apple ou Samsung.Nous...
Créer son site de rencontres
466 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
1 576 vues
Utiliser les opérations mathématiques (+, -, *, /) dans les styles
Utiliser les opérations mathématiques en SASS : +, -, , /1. Addition (+), Soustraction (-), Multiplication (*), Division (/) :En SASS, vous pouvez effectuer des opérations mathématiques...
Sass
531 vues
Gestion des événements : click, submit, keydown, etc.
Gestion des Événements en JavaScriptLa 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...
JS
1 827 vues
Afficher et envoyer les messages
Dans cette nouvelle vidéo nous allons afficher les messages entre vous et un autre utilisateur.Nous allons également créer un formulaire afin d'envoyer de nouveaux messages à l'utilisateur avec...
Créer son site de rencontres
239 vues
Positionnement statique, relatif, absolu et fixe
Positionnement Statique, Relatif, Absolu et Fixe en CSSEn CSS, le positionnement des éléments peut être contrôlé en utilisant différentes propriétés. Les quatre types de positionnement les...
CSS
375 vues
Introduction à CSS pour la mise en forme
Introduction à CSS pour la mise en formeCSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler...
HTML
1 869 vues
Envoyer un message sans recharger la page (1/2)
Nous allons améliorer notre messagerie interne vu que nous pouvons désormais envoyer et recevoir des messages.Pour cela nous allons utiliser du JavaScript avec de l'Ajax afin de faire des...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...