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);
- evenement : le nom de l’névenement que vous voulez écouter ( blur, click, … );
- Le code que vous voulez, ça peut être une fonction que vous avez déclarer ou bien une fonction anonyme.
- 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 ) |