javascript tome iii - Events

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
JAVASC RIPT (Programmation Internet) VOL. III
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
CHAPITRE 7 : LES EVENTS (événements) :
Un événement (event) est toute action infligée à un objet (changement
d'état de l'environnement qui peut être intercepté par le code JavaS-
cript) : survol par la souris, clic ou double-clic de souris (bouton gauche,
droit ou du milieu, ou de côté...), touche du clavier appuyée ou relâchée
et lequel précisément, une exception générée par une instruction, sé-
lection d’un élément d’une liste, chargement complet d’une page, fer-
meture d’une fenêtre (fenêtre normale, cadre, pop-up...)...
Un event-listener (fonction « d’écoute d’événement » ou « écouteur
d'événement ») est une méthode d’un objet, qui est à la traque d’events.
Un event-handler (fonction « gestionnaire d’événement ») est la fonc-
tion qui est appelée quand l’événement se produit. On dit que JavaScript
est un langage événementiel.
La programmation événémentielle est celle qui permet la gestion
d’événements = lie une fonction à la survenue d’un événement sur un
élément = abonnement de la fonction à l’élément pour l’événement : la
fonction est déclenchée (exécutée) lorsque l’événement survient sur cet
élément cible (target).
Syntaxe [très simple et intuitive] pour associer (lier) un événement à
une fonction gestionnaire d’événement :
objet.addEventListener(eventType, listenerFunction)
Équivalent de :

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-III
Les Événemets (Events ) 2 / 50 mardi, 2. octobre 2018
<élément onclick="code javaScript;"></élément>
ou
élément.onclick = eventHandler;
Il suffit simplement ci-dessus de connaître les différents eventlisteners
pour chaque élément.
Syntaxe pour désabonner un objet d’un eventlistener.
objet.removeEventListener(eventType, listenerFunc-
tion)
Quelques Event Listeners et quelques uns de leurs Domaines :
Un event listener est la méthode de l’objet qui lorgne un événement.
blur(document, liste de sélection), change (élé ment de
zone de texte, liste de sélection), click (document, bou-
ton, case é cocher, boutons,...), contextmenu (document),
focus (é lément de zone de texte, liste de sé lection), key-
down (document), load (Window), message (Window), mouseout
(document), mouseover (document), resize (Window), scroll
(Window), select (élément de zone de texte), unload (Win-
dow)...
Liste de quelques event listeners de l’objet window :
Pour avoir les équivalents DOM de ces listeners il suffit de supprimer le
préfixe ‹ on ».
<script type="text/javascript"> "use strict";

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-III
Les Événemets (Events ) 3 / 50 mardi, 2. octobre 2018
con-
sole.log(Object.getOwnPropertyNames(window).filter(functio
n(x){return x.startsWith("on")}))
</script>
Array [ "ondevicemotion", "ondeviceorientation", "onabso-
lutedeviceorientation", "ondeviceproximity", "onuserprox-
imity", "ondevicelight", "onvrdisplayconnect", "onvrdis-
playdisconnect", "onvrdisplayactivate", "onvrdisplaydeac-
tivate", … ]
[…]
[0…99]
0: "ondevicemotion"
1: "ondeviceorientation"
2: "onabsolutedeviceorientation"
3: "ondeviceproximity"
4: "onuserproximity"
5: "ondevicelight"
6: "onvrdisplayconnect"
7: "onvrdisplaydisconnect"
8: "onvrdisplayactivate"
9: "onvrdisplaydeactivate"
10: "onvrdisplaypresentchange"
11: "onabort"
12: "onblur"
13: "onfocus"
14: "onauxclick"
15: "oncanplay"
16: "oncanplaythrough"
17: "onchange"
18: "onclick"
19: "onclose"
20: "oncontextmenu"
21: "ondblclick"
22: "ondrag"
23: "ondragend"
24: "ondragenter"
25: "ondragexit"
26: "ondragleave"
27: "ondragover"
28: "ondragstart"
29: "ondrop"
30: "ondurationchange"
31: "onemptied"
32: "onended"
33: "oninput"
34: "oninvalid"
35: "onkeydown"
36: "onkeypress"

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-III
Les Événemets (Events ) 4 / 50 mardi, 2. octobre 2018
37: "onkeyup"
38: "onload"
39: "onloadeddata"
40: "onloadedmetadata"
41: "onloadend"
42: "onloadstart"
43: "onmousedown"
44: "onmouseenter"
45: "onmouseleave"
46: "onmousemove"
47: "onmouseout"
48: "onmouseover"
49: "onmouseup"
50: "onwheel"
51: "onpause"
52: "onplay"
53: "onplaying"
54: "onprogress"
55: "onratechange"
56: "onreset"
57: "onresize"
58: "onscroll"
59: "onseeked"
60: "onseeking"
61: "onselect"
62: "onshow"
63: "onstalled"
64: "onsubmit"
65: "onsuspend"
66: "ontimeupdate"
67: "onvolumechange"
68: "onwaiting"
69: "onselectstart"
70: "ontoggle"
71: "onpointercancel"
72: "onpointerdown"
73: "onpointerup"
74: "onpointermove"
75: "onpointerout"
76: "onpointerover"
77: "onpointerenter"
78: "onpointerleave"
79: "ongotpointercapture"
80: "onlostpointercapture"
81: "onmozfullscreenchange"
82: "onmozfullscreenerror"
83: "onanimationcancel"
84: "onanimationend"
85: "onanimationiteration"

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-III
Les Événemets (Events ) 5 / 50 mardi, 2. octobre 2018
86: "onanimationstart"
87: "ontransitioncancel"
88: "ontransitionend"
89: "ontransitionrun"
90: "ontransitionstart"
91: "onwebkitanimationend"
92: "onwebkitanimationiteration"
93: "onwebkitanimationstart"
94: "onwebkittransitionend"
95: "onerror"
96: "onafterprint"
97: "onbeforeprint"
98: "onbeforeunload"
99: "onhashchange"
[100…109]
100: "onlanguagechange"
101: "onmessage"
102: "onmessageerror"
103: "onoffline"
104: "ononline"
105: "onpagehide"
106: "onpageshow"
107: "onpopstate"
108: "onstorage"
109: "onunload"
length: 110
Liste de quelques events de l’objet Document :
<script type="text/javascript"> "use strict";
console.dir(Document.prototype)
</script>
Avec YANDEX :
Document {…}
...
1er onabort:(...)
2e onauxclick:(...)
3e onbeforecopy:(...)
4e onbeforecut:(...)