Gérer les événements

Les événements permettent à l’internaute de déclencher une fonction sur une action souris, clavier, ou tactile. Ils rendent le contenu interactif. L’utilisateur peut participer au comportement de la page en exécutant des taches sur le clic, au survol ou avec les touches du clavier..

Evénement en ligne

La première façon de créer un événement est d’utiliser un attribut comme onclick dans la balise HTML.

<input type="button" value="Cliquez ici" onclick="alert('toto')">

Testez vous-même

En cliquant sur le bouton vous afficher le texte ‘toto’ dans une fenêtre ‘alert’.

Liste des principaux événements

Evénements souris

• onclick : cliquer
• ondblclick : double clique
• onmouseover : au survol d’un élément html
• onmouseout : quitter le survol d’un élément html
• onmousedown : enfoncer le clique gauche (sans relacher)
• onmouseup : relacher le clique gauche
• onmousmove : bouger la souris sur un élément

Evénements clavier

• onkeydown : enfoncer une touche du clavier (sans relacher)
• onkeyup : relacher une touche du clavier
• onkeypress : enfoncer – relacher une touche du clavier

Evénements formulaire

• onfocus : prendre le focus (rentrer dans la zone de saisie)
• onblur : perdre le focus (sortir d’une zone de saisie)
• onchange : changer la valeur d’un élément HML

Bloquer un comportement par défaut

Il est possible de désactiver l’action par défaut d’un élément html, comme par exemple la redirection quand on clique sur un lien.

Pour cela, il faut utiliser le return false comme instruction dans l’évènement onclick

<a href="contact.html" onclick="return false;">Vers contact</a> <!-- redirection annulée -->

Syntaxe this

Le this fait référence à l’élément html qui a déclenché l’évènement

<input type="button" value="Cliquez ici" id="toto" onclick="alert(this.id)">

Testez vous-même

Le this fait référence au bouton qui déclenche l’alert. La fenêtre affichera donc l’id du bouton (this.id).

Evénement avec le DOM-0 (implémentée par Netscape)

L’inconvénient de la première méthode est que le javascript se retrouve mélangé avec le HTML.

Avec le DOM qui permet de cibler un élément HTML, on peut externaliser l’événement.

-> Code HTML

<input type="button" value="Cliquez ici" id="toto">

-> Code Javascript

let cible = document.getElementById('toto'); // cible le bouton
function action(){
    alert(this.id);
}
cible.onclick = action // évènement onclick

Dans cet exemple le code Javascript peut se situer dans un fichier externe (.js) et ce sont les méthodes DOM ( ici getElementById(‘toto’) ) qui vont permettre de cibler les éléments HTML.

Dans notre cas, c’est la propriété onclick reliée à l’objet ‘cible’ par la syntaxe pointée ‘.’ qui va déclencher la fonction ‘action’.

L’objet Event

Cet objet contient toutes les informations concernant l’événement (souris, clavier..). C’est avec cet objet qu’on peut récupérer par exemple la position (x et y ) de la souris.

L’objet est passé en paramètre de la fonction qui est appelée par l’événement

let cible = document.getElementById('toto'); // cible le bouton
function action(e){ // objet event passé en argument
    alert(e.type); // affiche click
}
cible.onclick = action // évènement onclick

L’objet Event (e dans l’exemple ci-dessus) peut être nommé autrement (evt ou event par exemple). La propriété type de l’objet Event indique quel type d’évènement s’est produit (ici click).

la propriété target de l’objet Event

Le target fait référence à l’élément html qui reçoit l’évènement et non pas à l’élément qui déclenche l’évènement (l’écouteur).

Pour comprendre la nuance, voici une structure HTML qui contient un parent (balise div) et un enfant (balise p). On applique l’évènement onclick sur le parent.

-> Code HTML

<div id="parent">
  <p id="enfant">toto</p>
</div>

-> Code Javascript

let parent = document.getElementById('parent'); 
function action(e){ // objet event passé en argument
    alert(e.target.id);
}
parent.onclick = action;

En cliquant sur l’élément parent (zone bleu), l’objet ciblé est ‘parent’, mais si vous cliquez sur l’enfant (zone orange), l’objet ciblé est ‘enfant’ puisqu’il recoit l’événement, et non pas le ‘parent’ qui pourtant est l’écouteur.

Le target permet de cibler tous les éléments descendants d’un élément parent (l’écouteur) sans leur associer d’évènement.

la propriété currentTarget de l’objet Event

Le currentTarget fonctionne comme le this vu plus haut. Elle fait toujours référence à l’écouteur, c’est à dire à celui qui déclenche l’événement.

Que vous cliquez sur le parent (zone bleu) ou sur l’enfant (zone orange), l’objet ciblé sera toujours celui qui déclenche l’évènement, c’est à dire le parent dans l’exemple ci-dessous.

Testez vous-même

Connaitre la position de la souris avec l’objet Event

Si vous utiliser des évènement souris (comme le ‘click’), il est possible de récupérer la position x et y de la souris avec les propriétés clientX et clientY de l’objet Event

function action(e){ // objet event passé en argument
    alert("position de la souris \n" + e.clientX + "px en x et " + e.clientY + "px en y");
}
window.onclick = action;

Testez vous-même

Ces propriétés peuvent être intéressant pour obliger un élément HTML à suivre la souris.

 Récupérer le code d’une touche clavier avec l’objet Event

Si vous utiliser des événements clavier (comme le ‘keydown’), il est possible de récupérer le code de la touche avec la propriété keyCode de l’objet Event

L’événement onkeypress ne peut capter que les touches de type caractère : Ctrl ou Shift par exemple ne correspondant pas à des caractères.

function action(e){ // objet event passé en argument
    alert("Code de la touche \n" + e.keyCode );
}
window.onkeydown = action;

Testez vous-même

Cliquez dans la zone grise, puis enfoncez un touche du clavier pour récupérer le code correspondant.

A l’inverse vous pouvez afficher le caractère à partir du code de la touche avec la méthodefromCharCode() de l’objet String.

function action(){
  alert( String.fromCharCode( 89 ) ); // retourne Y
}
window.onclick = action;

Testez vous-même

La méthode peut prendre plusieurs codes séparés par une virgule, elle renverra un mot

function action(){
  alert( String.fromCharCode( 79,85,13 ) ); // retourne OUI
}
window.onclick = action;

Testez vous-même

Vous remarquez que la méthode retourne toujours un caractère en majuscule.

 Bloquer un comportement par défaut avec l’objet Event

Il est possible de désactiver l’action par défaut d’un élément html, comme par exemple la redirection quand on clique sur un lien.

Pour cela, il faut utiliser la méthode preventDefault() de l’objet event

-> Code HTML

<a href="//www.google.fr/" id="toto">google</a>

-> Code Javascript

let cible = document.getElementById('toto');
function action(e){ // objet event passé en argument
    e.preventDefault(); // annule la redirection
}
cible.onclick = action // évènement onclick

Testez vous-même

Limites du DOM-0

Le DOM-0 ne permet l’addition de plusieurs évènements identiques sur le même élément HTML. Seul l’action du dernier évènement sera déclenchée, comme dans l’exemple ci-dessous

-> Code HTML

<input type="button" value="ok" id="toto">

-> Code Javascript

let cible = document.getElementById('toto');
function action1(){
    alert('action 1');
}
function action2(){
    alert('action 2');
}
cible.onclick = action1
cible.onclick = action2 // même évènement sur la même cible

Testez vous-même

Vous remarquez que la fonction ‘action1’ est ignorée

Evénement avec le DOM-2 (standard actuel)

Pour palier aux limites du DOM-0, vous pouvez utiliser une autre méthode, le DOM-2, qui prend aussi en charge l’objet Event.

Avec le Dom-2, l’événement est gérer par la méthode addEventListener() qui peut contenir trois paramètres :

• l’événement (sous forme de chaîne sans le « on », exemple ‘click’ )
• la fonction à appeler
• un booléen pour gérer la propagation (on y reviendra plus tard) : valeur false par défaut

Si on reprend l’exemple ci-dessus qui montrait les limites du DOM-0, on constate qu’avec le DOM-2, il est possible d’additionner plusieurs évènements identiques sur un même élément HTML

let cible = document.getElementById('toto');
function action1(){
    alert('action 1');
}
function action2(){
    alert('action 2');
}
cible.addEventListener("click", action1, false);
cible.addEventListener("click", action2, false);

Testez vous-même

Vous remarquez qu’en cliquant sur ‘ok’ les deux actions s’exécutent bien.

 utiliser l’objet Event

Comme avec le DOM-0, vous pouvez accéder à l’objet Event pour récupérer les informations concernant l’événement.

L’objet Event fonctionne exactement comme pour le DOM-0.

 gérer la propagation

Le troisième argument de la méthode addEventListener() permet de gérer le sens de propagation de l’évènement. Ce paramètre s’avère utile lorque les éléments HTML sont imbriqués comme dans l’exemple ci-dessous :

<div id="parent">
  <p id="enfant">toto</p>
</div>

• Si l’élément enfant s’exécute avant l’élément parent, on parle de bouillonnement, c’est le comportement par défaut, la valeur du troisième argument est false
• Si l’élément parent s’exécute avant l’élément enfant, on parle de capture, la valeur du troisième argument est true

Le code ci dessous exploite la capture.

let parent = document.getElementById('parent');
let enfant = document.getElementById('enfant');
function fenfant(){
    alert('enfant');
}
function fparent(){
    alert('parent');
}
enfant.addEventListener("click", fenfant, true); // capture
parent.addEventListener("click", fparent, true); // capture

Testez vous-même

Si vous cliquez d’abord sur ‘enfant’ (zone orange), c’est l’évènement du parent qui s’éxécute avant : c’est la phase de capture définie par la valeur true du troisième argument.

Si vous mettez false (ou si vous ne mettez pas de troisième argument), vous êtes dans la phase de propagation par défaut, qui est celle du bouillonnement.

let parent = document.getElementById('parent');
let enfant = document.getElementById('enfant');
function fenfant(){
    alert('enfant');
}
function fparent(){
    alert('parent');
}
enfant.addEventListener("click", fenfant, false); // bouillonnement
parent.addEventListener("click", fparent, false); // bouillonnement

Testez vous-même

Dans la majorité des cas, c’est le bouillonnement qui sera utilisé.

let parent = document.getElementById('parent');
let enfant = document.getElementById('enfant');
function fenfant(){
    alert('enfant');
}
function fparent(){
    alert('parent');
}
enfant.addEventListener("click", fenfant); // troisième argument omis
parent.addEventListener("click", fparent); // troisième argument omis

Dans la phase de bouillonnement le troisième argument peut-être omis.

 stopper la propagation

Si vous voulez éviter la propagation de l’évenement, il faut utiliser la méthode stopPropagation() de l’objet Event

Event.stopPropagation()

Dans l’exemple ci-dessous la progation est stoppée par l’élément ‘enfant’

let parent = document.getElementById('parent');
let enfant = document.getElementById('enfant');
function fenfant(e){
  alert('enfant');
  e.stopPropagation(); // on stoppe la propagation
}
function fparent(){
  alert('parent');
}
enfant.addEventListener("click", fenfant, false);
parent.addEventListener("click", fparent, false);

Testez vous-même

En cliquant sur l’enfant (zone orange), l’action ‘enfant’ se produit mais pas celle du ‘parent’ qui, pourtant, contient aussi un gestionnaire d’évènement.