Gestion des événements

Nous venons de voir que la gestion des événements peut se faire en affectant une fonction à la propriété événementielle de l'élément.

Supposons que nous devions réaliser deux actions différentes pour le même événement :

1
<img alt='image' id='image1'
2
									src='../res/html5.png'/>
1
const image =
2
									document.querySelector('#image1');
3
									image.onclick = function(){this.src = "../res/javascript.png"};
4
									image.onclick = function(){this.style.width = "200px"};

Le problème est que le deuxième script efface le contenu du premier. Seule la taille est modifiée.

image
Evénement - Gestion

Heureusement, il existe une méthode qui permet d'ajouter des fonctions à une propriété événementielle d'un élément.

Méthode AddEventListener

DéfinitionaddEventListener

1
element.addEventListener(evenement,
2
									fonction [, false]);

Permet d'ajouter une fonction à un événement (click, mousemove, load, ...)

HTML

1
<img alt='image' id='image2'
2
									src='../res/html5.png'/>

JavaScript

1
const image2 =
2
									document.querySelector('#image2');
3
									image2.addEventListener('click', function(){this.src =
4
									"../res/javascript.png"});
5
									image2.addEventListener('click', function(){this.style.width =
6
									"200px"});

Les deux fonctions seront lancées au clique sur l'image.

image
Evénement - addEventListener

Attention

Ne confondez pas propriété d'événement (onclick) et événement (click).

ComplémentCapture d'un événement

Capture d'un événement

Lorsqu'un événement est déclenché, il se propage dans l'arborescence du DOM.

  • Dans un premier temps, il se dirige vers l'intérieur de l'arbre : Capture

  • Dans un second temps, il remonte vers le tronc : Bouillonnement

Si le troisième paramètre de notre méthode est à true les fonctions d'événements sont déclenchées lors de la capture sinon lors du bouillonnement.

Par défaut, le paramètre est considéré à false.

C'est à dire, que par défaut, dans notre exemple c'est l'événement d'image qui sera traité , puis celui du div et ainsi de suite.

Exemple avec la valeur par défaut :

1
<div class='test'>
2
									<p>
3
									<img alt='image' src='../res/html5.png'/>
4
									</p>
5
									</div>
1
const div =
2
									document.querySelector('div.test');
3
									const p = document.querySelector('div.test p');
4
									const img = document.querySelector('div.test p img');
5
									div.addEventListener('click', () => alert('gestion du div'));
6
									p.addEventListener('click', () => alert('gestion du p'));
7
									img.addEventListener('click', () => alert('gestion de img'));

Cliquez sur l'image

image

Evénement - addEventListener

Exemple avec la valeur à true :

1
div.addEventListener('click', ()
2
									=> alert('gestion du div'), true);
3
									p.addEventListener('click', () => alert('gestion du p'),
4
									true);
5
									img.addEventListener('click', ( )=> alert('gestion de img'),
6
									true);

Cliquez sur l'image

image

Evénement - addEventListener

DéfinitionremoveEventListener

1
objet.removeEventListener(evenement,
2
									fonction [, false]);

Permet de supprimer une fonction à un événement (click, mousemove, load, ...)

HTML

1
<img alt='image4' id='image4'
2
									src='../res/javascript.png'/>

JavaScript

1
const image4 =
2
									document.querySelector('#image4');
3
									const image5 = document.querySelector('#image5');
4
									const message = () => alert("je passe sur l'image");
5
									image4.addEventListener('mouseover', message);
6
									image5.addEventListener('mouseover', message);
7
									image5.addEventListener('mouseout', function () {
8
									this.removeEventListener('mouseover', message);
9
									});

Survolez plusieurs fois les deux images

image4 image5
Evénement - removeEventListener

Quand on entre sur la première image on lance la fonction message.

Quand on entre sur la deuxième image on lance la fonction message.

A la sortie de la deuxième image, sa fonction message est supprimée de la liste des fonctions de l'événement mouseover.

Attention

Si vous utilisez les fonctions fléchées, n'oubliez pas que this n'est pas géré comme dans une fonction classique.