L'objet event

A chaque événement la variable window.event reçoit un objet.

Cet objet contient toutes les informations sur l'événement qui vient d'avoir lieu.

Exemple d'Objets événementiels

Suivant l'événement (souris, clavier, champ...) window.event hérite d'un des objets événementiels.

Pour accéder à la variable event, il faut que la fonction de l'événement l'ait passée en paramètre.

1
element.addEventListener('click',
2
									function(event){...}, false);

Méthodetype

1
event.type

Retourne le type d'événement survenu : click, mouseover, mousmove...

HTML

1
<img alt='image1' id='image1'
2
									src='../res/html5.png'/>
3
									<img alt='image2' id='image2'
4
									src='../res/javascript.png'/>

JavaScript

1
const maFonction =
2
									function(event){
3
									alert(event.type);
4
									}
5
									document.querySelector('#image1').addEventListener('click',
6
									maFonction);
7
									document.querySelector('#image2').addEventListener('dblclick',
8
									maFonction);

Cliquez sur l'image1 et double-cliquez sur l'image2

image1 image2
Evénement - event - type

Méthodetarget

1
event.target

L'élément sur lequel l'événement a eu lieu.

MéthodecurrentTarget

1
event.currentTarget

L'élément sur lequel l'événement est en cours de traitement.

Si deux éléments sont imbriqués et que l'on gère l'événement du parent, target retourne l'enfant et currentTarget le parent.

HTML

1
<div id='div' class='test'>
2
									<img alt='image3' id='image3'
3
									src='../res/javascript.png'/>
4
									</div>

JavaScript

1
const fonctionTarget = event
2
									=> alert("target : " + event.target.id + " currentTarget : "
3
									+ event.currentTarget.id);
4
									document.querySelector('#div').addEventListener('click',
5
									fonctionTarget);
6
									document.querySelector('#image3').addEventListener('click',
7
									fonctionTarget);

Cliquez sur l'image, puis à coté de l'image dans le div

image3
Evénement - event - target

MéthodetimeStamp

1
event.timeStamp

Retourne le nombre de millisecondes écoulées entre la création du document et le déclenchement de l'événement.

HTML

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

JavaScript

1
document
2
									.querySelector('#image4')
3
									.addEventListener('click', event => alert("Il y a " +
4
									event.timeStamp + "ms que la page est ouverte"));

Cliquez sur l'image

image4
Evénement - event - timeStamp

MéthodestopPropagation

1
event.stopPropagation()

Permet de stopper la propagation de l'événement aux objets parents.

Lorsque vous cliquez sur un objet, si celui-ci se trouve dans un conteneur parent, l'événement clique sur le conteneur est déclenché.

Dans certain cas, nous avons besoin de stopper cette propagation.

HTML

1
<div id='div2'>
2
									<img alt='image5' id='image5'
3
									src='../res/javascript.png'/>
4
									<img alt='image6' id='image6' src='../res/html5.png'/>
5
									</div>

JavaScript

1
document.querySelector('#div2').addEventListener('click',
2
									() => alert("clique sur le div"));
3
									document.querySelector('#image5').addEventListener('click', ()
4
									=> alert("clique sur la première image"));
5
									document.querySelector('#image6').addEventListener('click',
6
									event => {
7
									event.stopPropagation();
8
									alert("clique sur la deuxième image");
9
									});

Cliquez sur les images

image5 image6
Evénement - event - stopPropagation

Dans notre exemple, nous avons deux balises img imbriquées dans un div.

Lorsqu'on clique sur la première image le traitement de l'événement clique de l'image se déclenche puis celui du div.

Lorsqu'on clique sur la deuxième image seul le traitement de l'événement clique de l'image se déclenche grâce à stopPropagation.

MéthodepreventDefault

1
event.preventDefault()

Permet d'annuler l'action prévue d'un événement.

HTML

1
<img alt='image7' id='image7'
2
									src='../res/javascript.png'/>
3
									<img alt='image8' id='image8' src='../res/html5.png'/>

JavaScript

1
2
									document.querySelector('#image8').addEventListener('mousedown',
3
									event => event.preventDefault());
Déplacez les images

image7
image8


Evénement - event - preventDefault
Vous pouvez copier-coller une image d'un site en la déplaçant du navigateur vers un autre logiciel.
Pour empêcher ce déplacement par défaut, il faut annuler l'action sur l'événement.
Ici, seule la première image peut être déplacée.
event de la souris
MéthodeclientX, clientY, screenX, screenY, pageX, pageY
1
event.clientX
2
									event.clientY
3
									event.screenX
4
									event.screenY
5
									event.pageX
6
									event.pageY
Retourne les coordonnées de la souris.
client : par rapport au coin haut gauche de votre onglet visible (change en fonction du scrolling).
screen : par rapport au coin haut gauche de votre écran.
page : par rapport au coin haut gauche de votre onglet (ne change pas en fonction du scrolling)
HTML
1
<img alt='image9' id='image9'
2
									src='../res/javascript.png'/>
JavaScript
1
document.querySelector('#image9').addEventListener('mousemove',
2
									event => {
3
									document.querySelector('#image9 + div').textContent = "clientX:
4
									" + event.clientX + " clientY: " + event.clientY;
5
									document.querySelector('#image9 + div + div').textContent
6
									="screenX: " + event.screenX + " screenY: " + event.screenY;
7
									document.querySelector('#image9 + div + div + div').textContent
8
									= "pageX: " + event.pageX + " pageY: " + event.pageY;
9
									});
Survolez l'image

image9








Evénement - event - client screen page
Le survol de l'image affiche les coordonnées de la souris. Pour observer une différence entre client et page, vous devez réduire la taille de votre navigateur et jouer avec le scrolling.
Méthodebuttons
1
event.buttons
Retourne un nombre qui indique la ou les boutons de la souris cliqués :
1 : gauche
2 : droite
3 : gauche + droite
4 : milieu ou bouton roue
5 : gauche + milieu
6 : droite + milieu
7 : gauche + droite + milieu
HTML
1
<img alt='image10' id='image10'
2
									src='../res/javascript.png'/>
3
									<div></div>
JavaScript
1
document.querySelector('#image10').addEventListener('mousemove',
2
									event => {
3
									event.stopPropagation();
4
									event.preventDefault();
5
									document.querySelector('#image10 + div').textContent = "buttons
6
									= " + event.buttons;
7
									});
Survolez l'image en appuyant sur des boutons de la souris

image10




Evénement - event - buttons
Le survol de l'image affiche la valeur de event.buttons.
event du clavier
MéthodealtKey, ctrlKey, metaKey, shiftKey, code, key
1
event.altKey
2
									event.ctrlKey
3
									event.metaKey
4
									event.shiftKey
5
									event.code
6
									event.key
Retourne un booléen qui indique si la touche est cliqué :
altKey : alt,
ctrlKey : control.
metaKey : touche window, mac ...
shiftKey : shift
Retourne une valeur qui indique la touche appuyé:
code : code de la touche (a-> KeyQ - flechehaut->ArrowUp...)
key : cle de la touche (a->a - flechehaut->ArrowUp...)
HTML
1
<div id="div10"></div>
JavaScript
1
document.body.addEventListener('keydown'
2
									, event => {
3
									document.querySelector('#div10').textContent =
4
									'alt: ' + event.altKey +
5
									' -- ctrl: ' + event.ctrlKey +
6
									' -- meta: ' + event.metaKey +
7
									' -- shift: ' + event.shiftKey +
8
									' -- code: ' + event.code +
9
									' -- key: '+ event.key;
10
									})
Tapez au clavier





Evénement - event - Key