Comprendre et travailler avec les événements en javascript

Lorsque vous utilisez votre navigateur, il enregistre différents types d’événements comme par exemple quand votre utilisateur clique sur un bouton, envoye un formulaire ou survol un élément. C’est la manière du navigateur de vous dire que l’utilisateur vient d’effectuer une action. Votre script peut alors répondre à ces événements. Les scripts répondent souvent à ces événements en mettant à jour le contenu de la page Web via l’objet document, ce qui rend la page plus interactive. Dans ce chapitre, je vais vous lister différents types d’événement sur lequelles vous pouvez travailler afin de rendre vos pages un peu plus interactive.

Cet article n’est pas complet et peut être sujet à des mises à jour

Assigner une fonction à un événement


var bouton = document.getElementById('click');

function MonAlert() {
  alert('hello world');
}

bouton.onclick = MonAlert;

Tous les navigateurs modernes comprennent cette façon d’assigner une fonction à un événement mais vous ne pouvez attacher qu’une seule fonction à chaque événements et vous ne pouvez pas lui transmettre des paramètres. En effet, nous sommes obliger d’enlever les paranthèses afin que le code ne se déclanche pas.

Inconvénient

Lorsque que vous voulez assigner plusieurs fonctions à un événement, l’événement précédent la nouvelle sera écraser.

var bouton = document.getElementById('click');

function MonAlert() {
  alert('hello world!');
}

function AlertTOTO() {
  alert('Toto!')
}

bouton.onclick = MonAlert;
bouton.onclick = AlertTOTO;

Résultat, nous aurons le message Toto!.

Event Listener


Event Listeners est une méthode plus moderne qui permet d’assigner à un événement plusieurs fonctions à la fois.

var bouton = document.getElementById('click');

function MonAlert() {
  alert('hello world!');
}

function AlertTOTO() {
  alert('Toto!');
}

bouton.addEventListener('click', MonAlert);
bouton.addEventListener('click', AlertTOTO);

La méthode addEventlistener() prend trois paramètres:
element.addEventlistener('evenement', NomDeFonction, Boolean);

  1. evenement : le nom de l’névenement que vous voulez écouter ( blur, click, … );
  2. Le code que vous voulez, ça peut être une fonction que vous avez déclarer ou bien une fonction anonyme.
  3. Un boolean indiquant l’évolution des événements, par défaut cette valeur vaut false.

Inconvégnant

Cette méthode n’est pas supportée pour les anciens navigateurs.

Utiliser des paramètres


Nous avons vu que nous ne pouvons pas metre de parenthèse dans nos fonctions lorsque nous voulons l’assigner à un événement, pour pouvoir le faire nous pouvons créer une fonction anonyme qu’on assignera à un événement et dans celle-ci déclarer nos fonctions avec nos paramètres.

function MonAlert(message) {
  alert(message);
}

bouton.addEventListener('click', function() {
    MonAlert('Mon message qui s'affiche!');
});

L’Objet Event


Lorsqu’un événement se produit, il existe un objet événement qui contient des informations sur l’événement et sur l’élément sur lequel il s’est produit.

var bouton = document.getElementById('click');

function MonAlert(e) {
  console.log(e.target);
}

bouton.onclick = MonAlert;

Avec Event Listener avec des paramètres

var bouton = document.getElementById('click');

function MonAlert(e, message) {
    console.log(e.target);
    console.log(message);
}

bouton.addEventListener('click', function(e){
    MonAlert(e, "hello world!");
});

Propriété

Propriété Description
target L’élément qui a déclanché l’événement
type L’événement qui a été déclanché

Méthode

Méthode Description
preventDefault() Annule le comportement par défaut d’un événément (s’il peut être annulé)
stopPropagation() Stop la propagation de l’événement.

Liste des événements

Voici une petite liste non exhausive des événements que l’on rencontre régulièrement.

Navigateur

Événement Description
load Se déclenche lorsque le navigateur a terminé de charger. Il peut également déclencher des nœuds d’autres éléments chargés, tels que des images, des scripts ou des objets.
unload c’est l’inverse de l’événement load, il se déclanche quand on change de page.
resize se déclanche quand l’utilisateur change la taille de la fenêtre de son navigateur.
scroll se déclanche quand l’utilsiateur scroll la page ou un élément.
error error se déclanche quand le navigateur rencontre une erreur javascript.

Souris

Événement Description
click Se déclenche lorsque l’utilisateur clique sur un élément
dblclick Identique à click mais dans le cas où l’utilisateur effectue un double clique rapide.
mouseup Se déclenche lorsque l’utilisateur maintien un bouton de la souris.
mousedown Se déclenche lorsque l’utilisateur relâche un bouton de la souris.
mousemove Se déclenche lorsque le curseur se déplace.
mouseover se déclanche quand le curseur survole un élément.
mouseout se déclenche quand le curseur sort d’un élément dans lequel il le survolait ou bien dans un élément enfant de celui-ci.

Clavier

Événement Description
input Se déclenche lorsque la valeur d’un élément <input> ou <textarea> change.
keydown Se déclenche lorsque l’utilisateur appuie sur une touche du clavier. Si l’utilisateur tient enfoncée une touche, l’événement continue à se déclencher de façon répétée.
keypress Se déclenche lorsque l’utilisateur appuie sur une touche qui entraînerait l’affichage d’un caractère à l’écran. Par exemple, cet événement ne se déclencherait pas lorsque l’utilisateur appuie sur les touches fléchées, alors que l’événement keydown le ferait. Si l’utilisateur tient enfoncée une touche, l’événement continue à se déclencher de façon répétée comme pour keydown.
keyup Se déclenche lorsque l’utilisateur relâche une touche du clavier. Les événements keydown et keypress se déclenchent avant qu’un caractère ne s’affiche à l’écran, alors que le keyup se déclenche après son apparition.

Connaitre la touche qui a été pressée

Avec l’objet Event vous pouvez connaître la touche qui a été pressé en fesant e.keycode qui retournera le code clé ASCII de la touche du clavier.

Formulaire

Événement Description
submit Se déclenche lorsque l’utilisateur appuie sur le bouton de validation du formulaire.
change Se déclenche lorsque l’état de plusieurs éléments de formulaire change. ( radio, checkbox et select )

Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.