javascript tome iii - Events

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
J AVA S C R I P T (Programmation Internet) VO L . I I I
+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 JavaScript) : 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, fermeture 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 fonction 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
<é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, listenerFunction)
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, bouton, case é cocher, boutons,...), contextmenu (document),
focus (é lé ment de zone de texte, liste de sé lection), keydown (document), load (Window), message (Window), mouseout
(document), mouseover (document), resize (Window), scroll
(Window), select (é lé ment de zone de texte), unload (Window)...
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";
Les Événemets (Events)
2 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
console.log(Object.getOwnPropertyNames(window).filter(functio
n(x){return x.startsWith("on")}))
</script>
Array [ "ondevicemotion", "ondeviceorientation", "onabsolutedeviceorientation", "ondeviceproximity", "onuserproximity", "ondevicelight", "onvrdisplayconnect", "onvrdisplaydisconnect", "onvrdisplayactivate", "onvrdisplaydeactivate", … ]
[…]
[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"
Les Événemets (Events)
3 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
JavaScript Tome-III
"onkeyup"
"onload"
"onloadeddata"
"onloadedmetadata"
"onloadend"
"onloadstart"
"onmousedown"
"onmouseenter"
"onmouseleave"
"onmousemove"
"onmouseout"
"onmouseover"
"onmouseup"
"onwheel"
"onpause"
"onplay"
"onplaying"
"onprogress"
"onratechange"
"onreset"
"onresize"
"onscroll"
"onseeked"
"onseeking"
"onselect"
"onshow"
"onstalled"
"onsubmit"
"onsuspend"
"ontimeupdate"
"onvolumechange"
"onwaiting"
"onselectstart"
"ontoggle"
"onpointercancel"
"onpointerdown"
"onpointerup"
"onpointermove"
"onpointerout"
"onpointerover"
"onpointerenter"
"onpointerleave"
"ongotpointercapture"
"onlostpointercapture"
"onmozfullscreenchange"
"onmozfullscreenerror"
"onanimationcancel"
"onanimationend"
"onanimationiteration"
Les Événemets (Events)
4 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
JavaScript Tome-III
"onanimationstart"
"ontransitioncancel"
"ontransitionend"
"ontransitionrun"
"ontransitionstart"
"onwebkitanimationend"
"onwebkitanimationiteration"
"onwebkitanimationstart"
"onwebkittransitionend"
"onerror"
"onafterprint"
"onbeforeprint"
"onbeforeunload"
"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:(...)
Les Événemets (Events)
5 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
5e onbeforepaste:(...)
6e onblur:(...)
7e oncancel:(...)
8e oncanplay:(...)
9e oncanplaythrough:(...)
10e
onchange:(...)
11e
onclick:(...)
12e
onclose:(...)
13e
oncontextmenu:(...)
14e
oncopy:(...)
15e
oncuechange:(...)
16e
oncut:(...)
17e
ondblclick:(...)
18e
ondrag:(...)
19e
ondragend:(...)
20e
ondragenter:(...)
21e
ondragleave:(...)
22e
ondragover:(...)
23e
ondragstart:(...)
24e
ondrop:(...)
25e
ondurationchange:(...)
26e
onemptied:(...)
27e
onended:(...)
28e
onerror:(...)
29e
onfocus:(...)
30e
ongotpointercapture:(...)
31e
oninput:(...)
32e
oninvalid:(...)
33e
onkeydown:(...)
34e
onkeypress:(...)
35e
onkeyup:(...)
36e
onload:(...)
37e
onloadeddata:(...)
38e
onloadedmetadata:(...)
39e
onloadstart:(...)
40e
onlostpointercapture:(...)
41e
onmousedown:(...)
42e
onmouseenter:(...)
Les Événemets (Events)
6 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
43e
44e
onmouseleave:(...)
onmousemove:(...)
45e
46e
47e
48e
49e
50e
51e
52e
53e
54e
55e
56e
57e
58e
59e
60e
61e
62e
63e
64e
65e
66e
67e
68e
69e
70e
71e
72e
73e
74e
75e
76e
77e
78e
79e
80e
onmouseout:(...)
onmouseover:(...)
onmouseup:(...)
onmousewheel:(...)
onpaste:(...)
onpause:(...)
onplay:(...)
onplaying:(...)
onpointercancel:(...)
onpointerdown:(...)
onpointerenter:(...)
onpointerleave:(...)
onpointerlockchange:(...)
onpointerlockerror:(...)
onpointermove:(...)
onpointerout:(...)
onpointerover:(...)
onpointerup:(...)
onprogress:(...)
onratechange:(...)
onreadystatechange:(...)
onreset:(...)
onresize:(...)
onscroll:(...)
onsearch:(...)
onseeked:(...)
onseeking:(...)
onselect:(...)
onselectionchange:(...)
onselectstart:(...)
onstalled:(...)
onsubmit:(...)
onsuspend:(...)
ontimeupdate:(...)
ontoggle:(...)
onvisibilitychange:(...)
Les Événemets (Events)
7 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
81e
82e
onvolumechange:(...)
onwaiting:(...)
83e
84e
85e
...
onwebkitfullscreenchange:(...)
onwebkitfullscreenerror:(...)
onwheel:(...)
JavaScript Tome-III
Avec FIREFOX :
DocumentPrototype { getElementsByTagName: getElementsByTagName(), getElementsByTagNameNS: getElementsByTagNameNS(), getElementsByClassName: getElementsByClassName(), getElementById: getElementById(),
createElement: createElement(), createElementNS: createElementNS(), createDocumentFragment: createDocumentFragment(), createTextNode: createTextNode(),
createComment: createComment(), createProcessingInstruction: createProcessingInstruction(), … }
...
onabort: Getter & Setter
onafterscriptexecute: Getter & Setter
onanimationcancel: Getter & Setter
onanimationend: Getter & Setter
onanimationiteration: Getter & Setter
onanimationstart: Getter & Setter
onauxclick: Getter & Setter
onbeforescriptexecute: Getter & Setter
onblur: Getter & Setter
oncanplay: Getter & Setter
oncanplaythrough: Getter & Setter
onchange: Getter & Setter
onclick: Getter & Setter
onclose: Getter & Setter
oncontextmenu: Getter & Setter
oncopy: Getter & Setter
oncut: Getter & Setter
ondblclick: Getter & Setter
ondrag: Getter & Setter
ondragend: Getter & Setter
ondragenter: Getter & Setter
ondragexit: Getter & Setter
ondragleave: Getter & Setter
Les Événemets (Events)
8 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
ondragover: Getter & Setter
ondragstart: Getter & Setter
ondrop: Getter & Setter
ondurationchange: Getter & Setter
onemptied: Getter & Setter
onended: Getter & Setter
onerror: Getter & Setter
onfocus: Getter & Setter
ongotpointercapture: Getter & Setter
oninput: Getter & Setter
oninvalid: Getter & Setter
onkeydown: Getter & Setter
onkeypress: Getter & Setter
onkeyup: Getter & Setter
onload: Getter & Setter
onloadeddata: Getter & Setter
onloadedmetadata: Getter & Setter
onloadend: Getter & Setter
onloadstart: Getter & Setter
onlostpointercapture: Getter & Setter
onmousedown: Getter & Setter
onmouseenter: Getter & Setter
onmouseleave: Getter & Setter
onmousemove: Getter & Setter
onmouseout: Getter & Setter
onmouseover: Getter & Setter
onmouseup: Getter & Setter
onmozfullscreenchange: Getter & Setter
onmozfullscreenerror: Getter & Setter
onpaste: Getter & Setter
onpause: Getter & Setter
onplay: Getter & Setter
onplaying: Getter & Setter
onpointercancel: Getter & Setter
onpointerdown: Getter & Setter
onpointerenter: Getter & Setter
onpointerleave: Getter & Setter
onpointerlockchange: Getter & Setter
onpointerlockerror: Getter & Setter
onpointermove: Getter & Setter
onpointerout: Getter & Setter
onpointerover: Getter & Setter
onpointerup: Getter & Setter
onprogress: Getter & Setter
onratechange: Getter & Setter
Les Événemets (Events)
9 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
onreadystatechange: Getter & Setter
onreset: Getter & Setter
onresize: Getter & Setter
onscroll: Getter & Setter
onseeked: Getter & Setter
onseeking: Getter & Setter
onselect: Getter & Setter
onselectionchange: Getter & Setter
onselectstart: Getter & Setter
onshow: Getter & Setter
onstalled: Getter & Setter
onsubmit: Getter & Setter
onsuspend: Getter & Setter
ontimeupdate: Getter & Setter
ontoggle: Getter & Setter
ontransitioncancel: Getter & Setter
ontransitionend: Getter & Setter
ontransitionrun: Getter & Setter
ontransitionstart: Getter & Setter
onvisibilitychange: Getter & Setter
onvolumechange: Getter & Setter
onwaiting: Getter & Setter
onwebkitanimationend: Getter & Setter
onwebkitanimationiteration: Getter & Setter
onwebkitanimationstart: Getter & Setter
onwebkittransitionend: Getter & Setter
onwheel: Getter & Setter
...
Liste de quelques events de l’objet document :
<script type="text/javascript"> "use strict";
console.dir(document)
</script>
Avec FIREFOX :
...
onabort: null
onafterscriptexecute: null
onanimationcancel: null
Les Événemets (Events)
10 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onbeforescriptexecute: null
onblur: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragexit: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadend: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
Les Événemets (Events)
11 / 50
JavaScript Tome-III
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
onmouseover: null
onmouseup: null
onmozfullscreenchange: null
onmozfullscreenerror: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointerlockchange: null
onpointerlockerror: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreadystatechange: null
onreset: null
onresize: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onshow: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontransitioncancel: null
ontransitionend: null
ontransitionrun: null
ontransitionstart: null
onvisibilitychange: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
Les Événemets (Events)
12 / 50
JavaScript Tome-III
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
onwebkittransitionend: null
onwheel: null
...
JavaScript Tome-III
Liste de quelques events du prototype du constructeur (HTMLDocumentPrototype) de l’objet document :
Avec YANDEX :
document.__proto__
HTMLDocument {constructor: ƒ, Symbol(Symbol.toStringTag): "HTMLDocument"}
1er
onabort:(...)
2e onauxclick:(...)
3e onbeforecopy:(...)
4e onbeforecut:(...)
5e onbeforepaste:(...)
6e onblur:(...)
7e oncancel:(...)
8e oncanplay:(...)
9e oncanplaythrough:(...)
10e
onchange:(...)
11e
onclick:(...)
12e
onclose:(...)
13e
oncontextmenu:(...)
14e
oncopy:(...)
15e
oncuechange:(...)
16e
oncut:(...)
17e
ondblclick:(...)
18e
ondrag:(...)
19e
ondragend:(...)
20e
ondragenter:(...)
21e
ondragleave:(...)
22e
ondragover:(...)
23e
ondragstart:(...)
Les Événemets (Events)
13 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
24e
ondrop:(...)
25e
ondurationchange:(...)
26e
onemptied:(...)
27e
onended:(...)
28e
onerror:(...)
29e
onfocus:(...)
30e
ongotpointercapture:(...)
31e
oninput:(...)
32e
oninvalid:(...)
33e
onkeydown:(...)
34e
onkeypress:(...)
35e
onkeyup:(...)
36e
onload:(...)
37e
onloadeddata:(...)
38e
onloadedmetadata:(...)
39e
onloadstart:(...)
40e
onlostpointercapture:(...)
41e
onmousedown:(...)
42e
onmouseenter:(...)
43e
onmouseleave:(...)
44e
onmousemove:(...)
45e
onmouseout:(...)
46e
onmouseover:(...)
47e
onmouseup:(...)
48e
onmousewheel:(...)
49e
onpaste:(...)
50e
onpause:(...)
51e
onplay:(...)
52e
onplaying:(...)
53e
onpointercancel:(...)
54e
onpointerdown:(...)
55e
onpointerenter:(...)
56e
onpointerleave:(...)
57e
onpointerlockchange:(...)
58e
onpointerlockerror:(...)
59e
onpointermove:(...)
60e
onpointerout:(...)
61e
onpointerover:(...)
Les Événemets (Events)
14 / 50
JavaScript Tome-III
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
62e
onpointerup:(...)
63e
onprogress:(...)
64e
onratechange:(...)
65e
onreadystatechange:(...)
66e
onreset:(...)
67e
onresize:(...)
68e
onscroll:(...)
69e
onsearch:(...)
70e
onseeked:(...)
71e
onseeking:(...)
72e
onselect:(...)
73e
onselectionchange:(...)
74e
onselectstart:(...)
75e
onstalled:(...)
76e
onsubmit:(...)
77e
onsuspend:(...)
78e
ontimeupdate:(...)
79e
ontoggle:(...)
80e
onvisibilitychange:(...)
81e
onvolumechange:(...)
82e
onwaiting:(...)
83e
onwebkitfullscreenchange:(...)
84e
onwebkitfullscreenerror:(...)
85e
onwheel:(...)
JavaScript Tome-III
Avec FIREFOX :
document.__proto__
HTMLDocumentPrototype { open: open(), close: close(),
write: write(), writeln: writeln(), execCommand: execCommand(), queryCommandEnabled: queryCommandEnabled(), queryCommandIndeterm: queryCommandIndeterm(),
queryCommandState: queryCommandState(), queryCommandSupported: queryCommandSupported(), queryCommandValue: queryCommandValue(), … }
__proto__: DocumentPrototype { getElementsByTagName:
Les Événemets (Events)
15 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
getElementsByTagName(), getElementsByTagNameNS:
getElementsByTagNameNS(), getElementsByClassName:
getElementsByClassName(), … }
Liste de quelques events du prototype du constructeur du constructeur (« Document ») de l’objet document :
Avec YANDEX :
document.__proto__.__proto__
Document {…}
1er
onabort:(...)
2e onauxclick:(...)
3e onbeforecopy:(...)
4e onbeforecut:(...)
5e onbeforepaste:(...)
6e onblur:(...)
7e oncancel:(...)
8e oncanplay:(...)
9e oncanplaythrough:(...)
10e
onchange:(...)
11e
onclick:(...)
12e
onclose:(...)
13e
oncontextmenu:(...)
14e
oncopy:(...)
15e
oncuechange:(...)
16e
oncut:(...)
17e
ondblclick:(...)
18e
ondrag:(...)
19e
ondragend:(...)
20e
ondragenter:(...)
21e
ondragleave:(...)
22e
ondragover:(...)
23e
ondragstart:(...)
24e
ondrop:(...)
Les Événemets (Events)
16 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
25e
26e
ondurationchange:(...)
onemptied:(...)
27e
onended:(...)
28e
29e
30e
31e
32e
33e
34e
35e
36e
37e
38e
39e
40e
41e
42e
43e
44e
45e
46e
47e
48e
49e
50e
51e
52e
53e
54e
55e
56e
57e
58e
59e
60e
61e
62e
onerror:(...)
onfocus:(...)
ongotpointercapture:(...)
oninput:(...)
oninvalid:(...)
onkeydown:(...)
onkeypress:(...)
onkeyup:(...)
onload:(...)
onloadeddata:(...)
onloadedmetadata:(...)
onloadstart:(...)
onlostpointercapture:(...)
onmousedown:(...)
onmouseenter:(...)
onmouseleave:(...)
onmousemove:(...)
onmouseout:(...)
onmouseover:(...)
onmouseup:(...)
onmousewheel:(...)
onpaste:(...)
onpause:(...)
onplay:(...)
onplaying:(...)
onpointercancel:(...)
onpointerdown:(...)
onpointerenter:(...)
onpointerleave:(...)
onpointerlockchange:(...)
onpointerlockerror:(...)
onpointermove:(...)
onpointerout:(...)
onpointerover:(...)
onpointerup:(...)
Les Événemets (Events)
17 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
63e
64e
onprogress:(...)
onratechange:(...)
65e
onreadystatechange:(...)
66e
onreset:(...)
67e
onresize:(...)
68e
onscroll:(...)
69e
onsearch:(...)
70e
onseeked:(...)
71e
onseeking:(...)
72e
onselect:(...)
73e
onselectionchange:(...)
74e
onselectstart:(...)
75e
onstalled:(...)
76e
onsubmit:(...)
77e
onsuspend:(...)
78e
ontimeupdate:(...)
79e
ontoggle:(...)
80e
onvisibilitychange:(...)
81e
onvolumechange:(...)
82e
onwaiting:(...)
83e
onwebkitfullscreenchange:(...)
84e
onwebkitfullscreenerror:(...)
85e
onwheel:(...)
...
1er
get onabort:ƒ ()
2e set onabort:ƒ ()
3e get onauxclick:ƒ ()
4e set onauxclick:ƒ ()
5e get onbeforecopy:ƒ ()
6e set onbeforecopy:ƒ ()
7e get onbeforecut:ƒ ()
8e set onbeforecut:ƒ ()
9e get onbeforepaste:ƒ ()
10e
set onbeforepaste:ƒ ()
11e
get onblur:ƒ ()
12e
set onblur:ƒ ()
13e
get oncancel:ƒ ()
Les Événemets (Events)
18 / 50
JavaScript Tome-III
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
14e
15e
set oncancel:ƒ ()
get oncanplay:ƒ ()
16e
set oncanplay:ƒ ()
17e
18e
19e
20e
21e
22e
23e
24e
25e
26e
27e
28e
29e
30e
31e
32e
33e
34e
35e
36e
37e
38e
39e
40e
41e
42e
43e
44e
45e
46e
47e
48e
49e
50e
51e
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
JavaScript Tome-III
oncanplaythrough:ƒ
oncanplaythrough:ƒ
onchange:ƒ ()
onchange:ƒ ()
onclick:ƒ ()
onclick:ƒ ()
onclose:ƒ ()
onclose:ƒ ()
oncontextmenu:ƒ ()
oncontextmenu:ƒ ()
oncopy:ƒ ()
oncopy:ƒ ()
oncuechange:ƒ ()
oncuechange:ƒ ()
oncut:ƒ ()
oncut:ƒ ()
ondblclick:ƒ ()
ondblclick:ƒ ()
ondrag:ƒ ()
ondrag:ƒ ()
ondragend:ƒ ()
ondragend:ƒ ()
ondragenter:ƒ ()
ondragenter:ƒ ()
ondragleave:ƒ ()
ondragleave:ƒ ()
ondragover:ƒ ()
ondragover:ƒ ()
ondragstart:ƒ ()
ondragstart:ƒ ()
ondrop:ƒ ()
ondrop:ƒ ()
ondurationchange:ƒ
ondurationchange:ƒ
onemptied:ƒ ()
Les Événemets (Events)
()
()
()
()
19 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
52e
53e
set onemptied:ƒ ()
get onended:ƒ ()
54e
set onended:ƒ ()
55e
56e
57e
58e
59e
60e
61e
62e
63e
64e
65e
66e
67e
68e
69e
70e
71e
72e
73e
74e
75e
76e
77e
78e
79e
80e
81e
82e
83e
84e
85e
86e
87e
88e
89e
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
JavaScript Tome-III
onerror:ƒ ()
onerror:ƒ ()
onfocus:ƒ ()
onfocus:ƒ ()
ongotpointercapture:ƒ ()
ongotpointercapture:ƒ ()
oninput:ƒ ()
oninput:ƒ ()
oninvalid:ƒ ()
oninvalid:ƒ ()
onkeydown:ƒ ()
onkeydown:ƒ ()
onkeypress:ƒ ()
onkeypress:ƒ ()
onkeyup:ƒ ()
onkeyup:ƒ ()
onload:ƒ ()
onload:ƒ ()
onloadeddata:ƒ ()
onloadeddata:ƒ ()
onloadedmetadata:ƒ ()
onloadedmetadata:ƒ ()
onloadstart:ƒ ()
onloadstart:ƒ ()
onlostpointercapture:ƒ ()
onlostpointercapture:ƒ ()
onmousedown:ƒ ()
onmousedown:ƒ ()
onmouseenter:ƒ ()
onmouseenter:ƒ ()
onmouseleave:ƒ ()
onmouseleave:ƒ ()
onmousemove:ƒ ()
onmousemove:ƒ ()
onmouseout:ƒ ()
Les Événemets (Events)
20 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
90e
91e
set onmouseout:ƒ ()
get onmouseover:ƒ ()
92e
set onmouseover:ƒ ()
93e
94e
95e
96e
97e
98e
99e
100e
101e
102e
103e
104e
105e
106e
107e
108e
109e
110e
111e
112e
113e
114e
115e
116e
117e
118e
119e
120e
121e
122e
123e
124e
125e
126e
127e
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
JavaScript Tome-III
onmouseup:ƒ ()
onmouseup:ƒ ()
onmousewheel:ƒ ()
onmousewheel:ƒ ()
onpaste:ƒ ()
onpaste:ƒ ()
onpause:ƒ ()
onpause:ƒ ()
onplay:ƒ ()
onplay:ƒ ()
onplaying:ƒ ()
onplaying:ƒ ()
onpointercancel:ƒ ()
onpointercancel:ƒ ()
onpointerdown:ƒ ()
onpointerdown:ƒ ()
onpointerenter:ƒ ()
onpointerenter:ƒ ()
onpointerleave:ƒ ()
onpointerleave:ƒ ()
onpointerlockchange:ƒ ()
onpointerlockchange:ƒ ()
onpointerlockerror:ƒ ()
onpointerlockerror:ƒ ()
onpointermove:ƒ ()
onpointermove:ƒ ()
onpointerout:ƒ ()
onpointerout:ƒ ()
onpointerover:ƒ ()
onpointerover:ƒ ()
onpointerup:ƒ ()
onpointerup:ƒ ()
onprogress:ƒ ()
onprogress:ƒ ()
onratechange:ƒ ()
Les Événemets (Events)
21 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
128e
129e
set onratechange:ƒ ()
get onreadystatechange:ƒ ()
130e
set onreadystatechange:ƒ ()
131e
132e
133e
134e
135e
136e
137e
138e
139e
140e
141e
142e
143e
144e
145e
146e
147e
148e
149e
150e
151e
152e
153e
154e
155e
156e
157e
158e
159e
160e
161e
162e
163e
164e
165e
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
set
get
onreset:ƒ ()
onreset:ƒ ()
onresize:ƒ ()
onresize:ƒ ()
onscroll:ƒ ()
onscroll:ƒ ()
onsearch:ƒ ()
onsearch:ƒ ()
onseeked:ƒ ()
onseeked:ƒ ()
onseeking:ƒ ()
onseeking:ƒ ()
onselect:ƒ ()
onselect:ƒ ()
onselectionchange:ƒ ()
onselectionchange:ƒ ()
onselectstart:ƒ ()
onselectstart:ƒ ()
onstalled:ƒ ()
onstalled:ƒ ()
onsubmit:ƒ ()
onsubmit:ƒ ()
onsuspend:ƒ ()
onsuspend:ƒ ()
ontimeupdate:ƒ ()
ontimeupdate:ƒ ()
ontoggle:ƒ ()
ontoggle:ƒ ()
onvisibilitychange:ƒ ()
onvisibilitychange:ƒ ()
onvolumechange:ƒ ()
onvolumechange:ƒ ()
onwaiting:ƒ ()
onwaiting:ƒ ()
onwebkitfullscreenchange:ƒ ()
Les Événemets (Events)
22 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
166e
167e
set onwebkitfullscreenchange:ƒ ()
get onwebkitfullscreenerror:ƒ ()
168e
set onwebkitfullscreenerror:ƒ ()
169e
170e
...
1er
get onwheel:ƒ ()
set onwheel:ƒ ()
JavaScript Tome-III
__proto__:Node
Avec FIREFOX :
onabort: Getter & Setter
onafterscriptexecute: Getter & Setter
onanimationcancel: Getter & Setter
onanimationend: Getter & Setter
onanimationiteration: Getter & Setter
onanimationstart: Getter & Setter
onauxclick: Getter & Setter
onbeforescriptexecute: Getter & Setter
onblur: Getter & Setter
oncanplay: Getter & Setter
oncanplaythrough: Getter & Setter
onchange: Getter & Setter
onclick: Getter & Setter
onclose: Getter & Setter
oncontextmenu: Getter & Setter
oncopy: Getter & Setter
oncut: Getter & Setter
ondblclick: Getter & Setter
ondrag: Getter & Setter
ondragend: Getter & Setter
ondragenter: Getter & Setter
ondragexit: Getter & Setter
ondragleave: Getter & Setter
ondragover: Getter & Setter
ondragstart: Getter & Setter
ondrop: Getter & Setter
ondurationchange: Getter & Setter
onemptied: Getter & Setter
onended: Getter & Setter
onerror: Getter & Setter
Les Événemets (Events)
23 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
onfocus: Getter & Setter
ongotpointercapture: Getter & Setter
oninput: Getter & Setter
oninvalid: Getter & Setter
onkeydown: Getter & Setter
onkeypress: Getter & Setter
onkeyup: Getter & Setter
onload: Getter & Setter
onloadeddata: Getter & Setter
onloadedmetadata: Getter & Setter
onloadend: Getter & Setter
onloadstart: Getter & Setter
onlostpointercapture: Getter & Setter
onmousedown: Getter & Setter
onmouseenter: Getter & Setter
onmouseleave: Getter & Setter
onmousemove: Getter & Setter
onmouseout: Getter & Setter
onmouseover: Getter & Setter
onmouseup: Getter & Setter
onmozfullscreenchange: Getter & Setter
onmozfullscreenerror: Getter & Setter
onpaste: Getter & Setter
onpause: Getter & Setter
onplay: Getter & Setter
onplaying: Getter & Setter
onpointercancel: Getter & Setter
onpointerdown: Getter & Setter
onpointerenter: Getter & Setter
onpointerleave: Getter & Setter
onpointerlockchange: Getter & Setter
onpointerlockerror: Getter & Setter
onpointermove: Getter & Setter
onpointerout: Getter & Setter
onpointerover: Getter & Setter
onpointerup: Getter & Setter
onprogress: Getter & Setter
onratechange: Getter & Setter
onreadystatechange: Getter & Setter
onreset: Getter & Setter
onresize: Getter & Setter
onscroll: Getter & Setter
onseeked: Getter & Setter
onseeking: Getter & Setter
onselect: Getter & Setter
Les Événemets (Events)
24 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
onselectionchange: Getter & Setter
onselectstart: Getter & Setter
onshow: Getter & Setter
onstalled: Getter & Setter
onsubmit: Getter & Setter
onsuspend: Getter & Setter
ontimeupdate: Getter & Setter
ontoggle: Getter & Setter
ontransitioncancel: Getter & Setter
ontransitionend: Getter & Setter
ontransitionrun: Getter & Setter
ontransitionstart: Getter & Setter
onvisibilitychange: Getter & Setter
onvolumechange: Getter & Setter
onwaiting: Getter & Setter
onwebkitanimationend: Getter & Setter
onwebkitanimationiteration: Getter & Setter
onwebkitanimationstart: Getter & Setter
onwebkittransitionend: Getter & Setter
onwheel: Getter & Setter
...
__proto__: NodePrototype { getRootNode: getRootNode(), hasChildNodes: hasChildNodes(), insertBefore:
insertBefore(), … }
Signification de quelques Events les plus courants :
• animationend = animation CSS complé te
• onabort = Interruption de chargement d’image
• onblur = Perte de focus d’un é lé ment [de formulaire]
• onchange = Le contenu d’un champ [de formulaire] a changé
• onclick = Click de la souris sur un objet
• ondblclick = Dble-Click de la souris sur un objet
• ondragstart = Dé but de dé placement d’un é lé ment
• onerror = Erreur lors du chargement de la page ou d’une
image
• onfocus = Un é lé ment [de formulaire] prend le focus (devient la zone d'entré e active)
• onfocusout = Un é lé ment de formulaire perd le focus
• onkeydown = Une touche du clavier a é té enfoncé e
Les Événemets (Events)
25 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
• onkeypress = Une touche du clavier est frappé e ou gardé e
enfoncé e
• onkeyup = Une touche du clavier est relé ché e
• onload = Une page ou une image est chargé e complé tement
• onmousedown = Click sur un bouton de la souris
• onmousemove = La souris a bougé
• onmouseout = La souris est retiré e d’un é lé ment
• onmouseover = La souris est placé e sur un é lé ment ou un
de ses enfants
• onmouseup = Un bouton de la souris est relé ché
• onreset = Le bouton reset est cliqué
• onresize = Fené tre ou frame a changé de taille
• onselect = Du Texte a é té sé lectionné
• onsubmit = Le bouton submit a é té cliqué
• ontouchstart = Dé but de presion tactile sur l’é lé ment
• onunload = Fermeture de la page (dé chargement)
• swipe = glissement sur un é lé ment (jQuery mobile)
Quelques Event Listeners Breakpoints :
Animation :
Request Animation Frame,
Cancel Animation Frame,
Animation Frame Fired
Canvas :
Create canvas context,
WebGL Error Fired,
WebGL Warning Fired
Clipboard :
copy , cut , paste , beforecopy ,
beforecut , beforepaste
Control :
resize , scroll , zoom , focus , blur ,
Les Événemets (Events)
26 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
select , change , submit , reset
DOM Mutation :
DOMActivate , DOMFocusIn , DOMFocusOut ,
DOMAttrModified , DOMCharacterDataModified ,
DOMNodeInserted , DOMNodeInsertedIntoDocument ,
DOMNodeRemoved , DOMNodeRemovedFromDocument ,
DOMSubtreeModified , DOMContentLoaded
Device :
deviceorientation , devicemotion
Drag / drop :
dragenter , dragover , dragleave , drop
Geolocation :
getCurrentPosition , watchPosition
Keyboard :
keydown , keyup , keypress , input
Load :
load , beforeunload , unload , abort , error ,
hashchange , popstate
Media :
play , pause , playing , canplay , canplaythrough ,
seeking , seeked , timeupdate , ended , ratechange ,
durationchange , volumechange , loadstart ,
progress , suspend , abort , error , emptied ,
stalled , loadedmetadata , loadeddata , waiting
Mouse :
Les Événemets (Events)
27 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
auxclick , click , dblclick , mousedown , mouseup ,
mouseover , mousemove , mouseout , mouseenter ,
mouseleave , mousewheel , wheel , contextmenu
Notification :
requestPermission
Parse :
Set innerHTML , document.write
Pointer :
pointerover , pointerout , pointerenter ,
pointerleave , pointerdown , pointerup ,
pointermove , pointercancel , gotpointercapture ,
lostpointercapture
Script :
Script First Statement , Script Blocked by Content Security Policy
Timer :
setTimeout , clearTimeout , setInterval ,
clearInterval , setTimeout fired ,
setInterval fired
Touch :
touchstart , touchmove , touchend , touchcancel
Window :
window.close
XHR :
Les Événemets (Events)
28 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
readystatechange , load , loadstart , loadend ,
abort , error , progress , timeout
Afficher [En Détail] le contenu de l’objet « Event mouseup » :
Il est créé un objet « event » pour chaque événement. Cet objet
« event », dont le type varie selon l’événement) est passé en paramètre à
la fonction event handler associée et qui est exécutée à la survenue
de l’événement. L’objet « event » possède aussi des propriétés, et ces
propriétés donnent des informations sur l’événement.
<script type="text/javascript">
function disp(event) {
console.log(event);
console.log(“==========”);
console.log(Object.getOwnPropertyDescriptors(event));
}
</script>
</head>
<body onmouseup="disp(event)">
Cliquez ici.
</body>
Exécution : Après le clic
Avec YANDEX :
Cliquez ici.
MouseEvent {isTrusted: true, screenX: 292, screenY: 266,
clientX: 208, clientY: 183, …}
==========
{isTrusted: {…}}
MouseEvent {isTrusted: true, screenX: 182, screenY: 183,
clientX: 98, clientY: 100, …}
altKey: false
bubbles: true
Les Événemets (Events)
29 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 98
clientY: 100
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 98
layerY: 100
metaKey: false
movementX: 0
movementY: 0
offsetX: 90
offsetY: 92
pageX: 98
pageY: 100
path: (4) [body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 182
screenY: 183
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false
}
srcElement: body
target: body
timeStamp: 2275.995
toElement: body
type: "mouseup"
view: Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ,
prompt: ƒ, …}
which: 1
x: 98
y: 100
__proto__: MouseEvent
{isTrusted: {…}}
isTrusted:{set: undefined, enumerable: true, configurable: false, get: ƒ}
Les Événemets (Events)
30 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
__proto__:Object
Avec FIREfOX :
mouseup { target: body, buttons: 0, clientX: 42, clientY:
20, layerX: 42, layerY: 20 }
==========
Object { isTrusted: {…} }
mouseup { target: body, buttons: 0, clientX: 42, clientY:
20, layerX: 42, layerY: 20 }
mouseup
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 42
clientY: 20
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
explicitOriginalTarget: #text "
Cliquez ici.
"
isTrusted: true
layerX: 42
layerY: 20
metaKey: false
movementX: 42
movementY: 20
mozInputSource: 1
mozPressure: 0
offsetX: 0
offsetY: 0
originalTarget: <body onmouseup="disp(event)">
pageX: 42
pageY: 20
rangeOffset: 0
rangeParent: null
Les Événemets (Events)
31 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
region: ""
relatedTarget: null
screenX: 708
screenY: 118
shiftKey: false
target: <body onmouseup="disp(event)">
timeStamp: 30361.27132684458
type: "mouseup"
view: Window file:///F:/DADET/PROGS/test.html
which: 1
x: 42
y: 20
__proto__: MouseEventPrototype { initMouseEvent: initMouseEvent(), getModifierState: getModifierState(), initNSMouseEvent: initNSMouseEvent(), … }
Object { isTrusted: {…} }
{…}
isTrusted: Object { get: get isTrusted(), enumerable:
true, configurable: false, … }
__proto__: Object { … }
{…}
isTrusted: {…}
configurable: false
enumerable: true
get: function get isTrusted()
set: undefined
__proto__: Object { … }
__proto__: Object { … }
Contenu de l’objet « Event keyup » de la souris :
<script type="text/javascript">
function disp(event) {
console.log(event);
}
</script>
</head>
<body onkeyup="disp(event)">
Cliquez ici.
Les Événemets (Events)
32 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
</body>
Exécution :
Tapez des touches du clavier.
keyup { target: body, key: "d", charCode: 0, keyCode: 68 }
keyup { target: body, key: "i", charCode: 0, keyCode: 73 }
keyup { target: body, key: "a", charCode: 0, keyCode: 65 }
keyup { target: body, key: "s", charCode: 0, keyCode: 83 }
keyup { target: body, key: "o", charCode: 0, keyCode: 79 }
keyup { target: body, key: "l", charCode: 0, keyCode: 76 }
keyup { target: body, key: "u", charCode: 0, keyCode: 85 }
keyup { target: body, key: "k", charCode: 0, keyCode: 75 }
keyup Control { target: body, key: "z", charCode: 0, keyCode:
90 }
Le « KeyBoard Event onkeyup » avec « event.keyCode » :
<html>
<head>
<script type="text/javascript">
function codeUNICODE(event) {
console.log(event.keyCode)
}
</script>
</head>
<body onkeyup=" codeUNICODE(event)">
Frappez des touches du clavier.
</body>
La variable système « event » s’initialise à la survenue d’un event.
Exécution :
Frappez des touches du clavier.
68 70 83 68 90 70 9 67 17 91 17 16 0 93 27 32 48 16
Quelques keyboard Codes :
Les Événemets (Events)
33 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
isTrusted * true
getModifierState * function getModifierState()
initKeyboardEvent * function initKeyboardEvent()
initKeyEvent * function initKeyEvent()
charCode * 0
keyCode * 68
altKey * false
ctrlKey * false
shiftKey * false
metaKey * false
location * 0
repeat * false
isComposing * false
key * d
code * KeyD
DOM_KEY_LOCATION_STANDARD * 0
DOM_KEY_LOCATION_LEFT * 1
DOM_KEY_LOCATION_RIGHT * 2
DOM_KEY_LOCATION_NUMPAD * 3
DOM_VK_CANCEL * 3
DOM_VK_HELP * 6
DOM_VK_BACK_SPACE * 8
DOM_VK_TAB * 9
DOM_VK_CLEAR * 12
DOM_VK_RETURN * 13
DOM_VK_SHIFT * 16
DOM_VK_CONTROL * 17
DOM_VK_ALT * 18
DOM_VK_PAUSE * 19
DOM_VK_CAPS_LOCK * 20
DOM_VK_KANA * 21
DOM_VK_HANGUL * 21
DOM_VK_EISU * 22
DOM_VK_JUNJA * 23
DOM_VK_FINAL * 24
DOM_VK_HANJA * 25
DOM_VK_KANJI * 25
DOM_VK_ESCAPE * 27
DOM_VK_CONVERT * 28
DOM_VK_NONCONVERT * 29
DOM_VK_ACCEPT * 30
DOM_VK_MODECHANGE * 31
DOM_VK_SPACE * 32
DOM_VK_PAGE_UP * 33
DOM_VK_PAGE_DOWN * 34
DOM_VK_END * 35
DOM_VK_HOME * 36
DOM_VK_LEFT * 37
Les Événemets (Events)
34 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
DOM_VK_UP * 38
DOM_VK_RIGHT * 39
DOM_VK_DOWN * 40
DOM_VK_SELECT * 41
DOM_VK_PRINT * 42
DOM_VK_EXECUTE * 43
DOM_VK_PRINTSCREEN * 44
DOM_VK_INSERT * 45
DOM_VK_DELETE * 46
DOM_VK_0 * 48
DOM_VK_1 * 49
DOM_VK_2 * 50
DOM_VK_3 * 51
DOM_VK_4 * 52
DOM_VK_5 * 53
DOM_VK_6 * 54
DOM_VK_7 * 55
DOM_VK_8 * 56
DOM_VK_9 * 57
DOM_VK_COLON * 58
DOM_VK_SEMICOLON * 59
DOM_VK_LESS_THAN * 60
DOM_VK_EQUALS * 61
DOM_VK_GREATER_THAN * 62
DOM_VK_QUESTION_MARK * 63
DOM_VK_AT * 64
DOM_VK_A * 65
DOM_VK_B * 66
DOM_VK_C * 67
DOM_VK_D * 68
DOM_VK_E * 69
DOM_VK_F * 70
DOM_VK_G * 71
DOM_VK_H * 72
DOM_VK_I * 73
DOM_VK_J * 74
DOM_VK_K * 75
DOM_VK_L * 76
DOM_VK_M * 77
DOM_VK_N * 78
DOM_VK_O * 79
DOM_VK_P * 80
DOM_VK_Q * 81
DOM_VK_R * 82
DOM_VK_S * 83
DOM_VK_T * 84
DOM_VK_U * 85
DOM_VK_V * 86
DOM_VK_W * 87
DOM_VK_X * 88
Les Événemets (Events)
35 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
DOM_VK_Y * 89
DOM_VK_Z * 90
DOM_VK_WIN * 91
DOM_VK_CONTEXT_MENU * 93
DOM_VK_SLEEP * 95
DOM_VK_NUMPAD0 * 96
DOM_VK_NUMPAD1 * 97
DOM_VK_NUMPAD2 * 98
DOM_VK_NUMPAD3 * 99
DOM_VK_NUMPAD4 * 100
DOM_VK_NUMPAD5 * 101
DOM_VK_NUMPAD6 * 102
DOM_VK_NUMPAD7 * 103
DOM_VK_NUMPAD8 * 104
DOM_VK_NUMPAD9 * 105
DOM_VK_MULTIPLY * 106
DOM_VK_ADD * 107
DOM_VK_SEPARATOR * 108
DOM_VK_SUBTRACT * 109
DOM_VK_DECIMAL * 110
DOM_VK_DIVIDE * 111
DOM_VK_F1 * 112
DOM_VK_F2 * 113
DOM_VK_F3 * 114
DOM_VK_F4 * 115
DOM_VK_F5 * 116
DOM_VK_F6 * 117
DOM_VK_F7 * 118
DOM_VK_F8 * 119
DOM_VK_F9 * 120
DOM_VK_F10 * 121
DOM_VK_F11 * 122
DOM_VK_F12 * 123
DOM_VK_F13 * 124
DOM_VK_F14 * 125
DOM_VK_F15 * 126
DOM_VK_F16 * 127
DOM_VK_F17 * 128
DOM_VK_F18 * 129
DOM_VK_F19 * 130
DOM_VK_F20 * 131
DOM_VK_F21 * 132
DOM_VK_F22 * 133
DOM_VK_F23 * 134
DOM_VK_F24 * 135
DOM_VK_NUM_LOCK * 144
DOM_VK_SCROLL_LOCK * 145
DOM_VK_WIN_OEM_FJ_JISHO * 146
DOM_VK_WIN_OEM_FJ_MASSHOU * 147
DOM_VK_WIN_OEM_FJ_TOUROKU * 148
Les Événemets (Events)
36 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
DOM_VK_WIN_OEM_FJ_LOYA * 149
DOM_VK_WIN_OEM_FJ_ROYA * 150
DOM_VK_CIRCUMFLEX * 160
DOM_VK_EXCLAMATION * 161
DOM_VK_DOUBLE_QUOTE * 162
DOM_VK_HASH * 163
DOM_VK_DOLLAR * 164
DOM_VK_PERCENT * 165
DOM_VK_AMPERSAND * 166
DOM_VK_UNDERSCORE * 167
DOM_VK_OPEN_PAREN * 168
DOM_VK_CLOSE_PAREN * 169
DOM_VK_ASTERISK * 170
DOM_VK_PLUS * 171
DOM_VK_PIPE * 172
DOM_VK_HYPHEN_MINUS * 173
DOM_VK_OPEN_CURLY_BRACKET * 174
DOM_VK_CLOSE_CURLY_BRACKET * 175
DOM_VK_TILDE * 176
DOM_VK_VOLUME_MUTE * 181
DOM_VK_VOLUME_DOWN * 182
DOM_VK_VOLUME_UP * 183
DOM_VK_COMMA * 188
DOM_VK_PERIOD * 190
DOM_VK_SLASH * 191
DOM_VK_BACK_QUOTE * 192
DOM_VK_OPEN_BRACKET * 219
DOM_VK_BACK_SLASH * 220
DOM_VK_CLOSE_BRACKET * 221
DOM_VK_QUOTE * 222
DOM_VK_META * 224
OM_VK_ALTGR * 225
DOM_VK_WIN_ICO_HELP * 227
DOM_VK_WIN_ICO_00 * 228
DOM_VK_WIN_ICO_CLEAR * 230
DOM_VK_WIN_OEM_RESET * 233
DOM_VK_WIN_OEM_JUMP * 234
DOM_VK_WIN_OEM_PA1 * 235
DOM_VK_WIN_OEM_PA2 * 236
DOM_VK_WIN_OEM_PA3 * 237
DOM_VK_WIN_OEM_WSCTRL * 238
DOM_VK_WIN_OEM_CUSEL * 239
DOM_VK_WIN_OEM_ATTN * 240
DOM_VK_WIN_OEM_FINISH * 241
DOM_VK_WIN_OEM_COPY * 242
DOM_VK_WIN_OEM_AUTO * 243
DOM_VK_WIN_OEM_ENLW * 244
DOM_VK_WIN_OEM_BACKTAB * 245
DOM_VK_ATTN * 246
DOM_VK_CRSEL * 247
Les Événemets (Events)
37 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
DOM_VK_EXSEL * 248
DOM_VK_EREOF * 249
DOM_VK_PLAY * 250
DOM_VK_ZOOM * 251
DOM_VK_PA1 * 253
DOM_VK_WIN_OEM_CLEAR * 254
initUIEvent * function initUIEvent()
view * [object Window]
detail * 0
layerX * 0
layerY * 0
pageX * 0
pageY * 0
which * 68
rangeParent * [object Text]
rangeOffset * 36
SCROLL_PAGE_UP * -32768
SCROLL_PAGE_DOWN * 32768
stopPropagation * function stopPropagation()
stopImmediatePropagation * function stopImmediatePropagation()
preventDefault * function preventDefault()
initEvent * function initEvent()
getPreventDefault * function getPreventDefault()
type * keyup
target * [object HTMLBodyElement]
currentTarget * [object HTMLBodyElement]
eventPhase * 2
bubbles * true
cancelable * true
defaultPrevented * false
composed * true
timeStamp * 26858.731007798015
cancelBubble * false
originalTarget * [object HTMLBodyElement]
explicitOriginalTarget * [object HTMLBodyElement]
NONE * 0
CAPTURING_PHASE * 1
AT_TARGET * 2
BUBBLING_PHASE * 3
ALT_MASK * 1
CONTROL_MASK * 2
SHIFT_MASK * 4
META_MASK * 8
isTrusted * true
getModifierState * function getModifierState()
initKeyboardEvent * function initKeyboardEvent()
initKeyEvent * function initKeyEvent()
charCode * 0
keyCode * 9
Les Événemets (Events)
38 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
altKey * false
ctrlKey * false
shiftKey * false
metaKey * false
location * 0
repeat * false
isComposing * false
key * Tab
code * Tab
DOM_KEY_LOCATION_STANDARD * 0
DOM_KEY_LOCATION_LEFT * 1
DOM_KEY_LOCATION_RIGHT * 2
DOM_KEY_LOCATION_NUMPAD * 3
DOM_VK_CANCEL * 3
DOM_VK_HELP * 6
DOM_VK_BACK_SPACE * 8
DOM_VK_TAB * 9
DOM_VK_CLEAR * 12
DOM_VK_RETURN * 13
DOM_VK_SHIFT * 16
DOM_VK_CONTROL * 17
DOM_VK_ALT * 18
DOM_VK_PAUSE * 19
DOM_VK_CAPS_LOCK * 20
DOM_VK_KANA * 21
DOM_VK_HANGUL * 21
DOM_VK_EISU * 22
DOM_VK_JUNJA * 23
DOM_VK_FINAL * 24
DOM_VK_HANJA * 25
DOM_VK_KANJI * 25
DOM_VK_ESCAPE * 27
DOM_VK_CONVERT * 28
DOM_VK_NONCONVERT * 29
DOM_VK_ACCEPT * 30
DOM_VK_MODECHANGE * 31
DOM_VK_SPACE * 32
DOM_VK_PAGE_UP * 33
DOM_VK_PAGE_DOWN * 34
DOM_VK_END * 35
DOM_VK_HOME * 36
DOM_VK_LEFT * 37
DOM_VK_UP * 38
DOM_VK_RIGHT * 39
DOM_VK_DOWN * 40
DOM_VK_SELECT * 41
DOM_VK_PRINT * 42
DOM_VK_EXECUTE * 43
DOM_VK_PRINTSCREEN * 44
DOM_VK_INSERT * 45
Les Événemets (Events)
39 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
DOM_VK_DELETE * 46
DOM_VK_0 * 48
DOM_VK_1 * 49
DOM_VK_2 * 50
DOM_VK_3 * 51
DOM_VK_4 * 52
DOM_VK_5 * 53
DOM_VK_6 * 54
DOM_VK_7 * 55
DOM_VK_8 * 56
DOM_VK_9 * 57
DOM_VK_COLON * 58
DOM_VK_SEMICOLON * 59
DOM_VK_LESS_THAN * 60
DOM_VK_EQUALS * 61
DOM_VK_GREATER_THAN * 62
DOM_VK_QUESTION_MARK * 63
DOM_VK_AT * 64
DOM_VK_A * 65
DOM_VK_B * 66
DOM_VK_C * 67
DOM_VK_D * 68
DOM_VK_E * 69
membres.html:5:20
DOM_VK_F * 70
DOM_VK_G * 71
DOM_VK_H * 72
DOM_VK_I * 73
DOM_VK_J * 74
DOM_VK_K * 75
DOM_VK_L * 76
DOM_VK_M * 77
DOM_VK_N * 78
DOM_VK_O * 79
DOM_VK_P * 80
DOM_VK_Q * 81
DOM_VK_R * 82
DOM_VK_S * 83
DOM_VK_T * 84
DOM_VK_U * 85
DOM_VK_V * 86
DOM_VK_W * 87
DOM_VK_X * 88
DOM_VK_Y * 89
DOM_VK_Z * 90
DOM_VK_WIN * 91
DOM_VK_CONTEXT_MENU * 93
DOM_VK_SLEEP * 95
DOM_VK_NUMPAD0 * 96
DOM_VK_NUMPAD1 * 97
Les Événemets (Events)
40 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
DOM_VK_NUMPAD2 * 98
DOM_VK_NUMPAD3 * 99
DOM_VK_NUMPAD4 * 100
DOM_VK_NUMPAD5 * 101
DOM_VK_NUMPAD6 * 102
DOM_VK_NUMPAD7 * 103
DOM_VK_NUMPAD8 * 104
DOM_VK_NUMPAD9 * 105
DOM_VK_MULTIPLY * 106
DOM_VK_ADD * 107
DOM_VK_SEPARATOR * 108
DOM_VK_SUBTRACT * 109
DOM_VK_DECIMAL * 110
DOM_VK_DIVIDE * 111
DOM_VK_F1 * 112
DOM_VK_F2 * 113
DOM_VK_F3 * 114
DOM_VK_F4 * 115
DOM_VK_F5 * 116
DOM_VK_F6 * 117
DOM_VK_F7 * 118
DOM_VK_F8 * 119
DOM_VK_F9 * 120
DOM_VK_F10 * 121
DOM_VK_F11 * 122
DOM_VK_F12 * 123
DOM_VK_F13 * 124
DOM_VK_F14 * 125
DOM_VK_F15 * 126
DOM_VK_F16 * 127
DOM_VK_F17 * 128
DOM_VK_F18 * 129
DOM_VK_F19 * 130
DOM_VK_F20 * 131
DOM_VK_F21 * 132
DOM_VK_F22 * 133
DOM_VK_F23 * 134
DOM_VK_F24 * 135
DOM_VK_NUM_LOCK * 144
DOM_VK_SCROLL_LOCK * 145
DOM_VK_WIN_OEM_FJ_JISHO * 146
DOM_VK_WIN_OEM_FJ_MASSHOU * 147
DOM_VK_WIN_OEM_FJ_TOUROKU * 148
DOM_VK_WIN_OEM_FJ_LOYA * 149
DOM_VK_WIN_OEM_FJ_ROYA * 150
DOM_VK_CIRCUMFLEX * 160
DOM_VK_EXCLAMATION * 161
DOM_VK_DOUBLE_QUOTE * 162
DOM_VK_HASH * 163
DOM_VK_DOLLAR * 164
Les Événemets (Events)
41 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
DOM_VK_PERCENT * 165
DOM_VK_AMPERSAND * 166
DOM_VK_UNDERSCORE * 167
DOM_VK_OPEN_PAREN * 168
DOM_VK_CLOSE_PAREN * 169
DOM_VK_ASTERISK * 170
DOM_VK_PLUS * 171
DOM_VK_PIPE * 172
DOM_VK_HYPHEN_MINUS * 173
DOM_VK_OPEN_CURLY_BRACKET * 174
DOM_VK_CLOSE_CURLY_BRACKET * 175
DOM_VK_TILDE * 176
DOM_VK_VOLUME_MUTE * 181
DOM_VK_VOLUME_DOWN * 182
DOM_VK_VOLUME_UP * 183
DOM_VK_COMMA * 188
DOM_VK_PERIOD * 190
DOM_VK_SLASH * 191
DOM_VK_BACK_QUOTE * 192
DOM_VK_OPEN_BRACKET * 219
DOM_VK_BACK_SLASH * 220
DOM_VK_CLOSE_BRACKET * 221
DOM_VK_QUOTE * 222
DOM_VK_META * 224
DOM_VK_ALTGR * 225
DOM_VK_WIN_ICO_HELP * 227
DOM_VK_WIN_ICO_00 * 228
DOM_VK_WIN_ICO_CLEAR * 230
DOM_VK_WIN_OEM_RESET * 233
DOM_VK_WIN_OEM_JUMP * 234
DOM_VK_WIN_OEM_PA1 * 235
DOM_VK_WIN_OEM_PA2 * 236
DOM_VK_WIN_OEM_PA3 * 237
DOM_VK_WIN_OEM_WSCTRL * 238
DOM_VK_WIN_OEM_CUSEL * 239
DOM_VK_WIN_OEM_ATTN * 240
DOM_VK_WIN_OEM_FINISH * 241
DOM_VK_WIN_OEM_COPY * 242
DOM_VK_WIN_OEM_AUTO * 243
DOM_VK_WIN_OEM_ENLW * 244
DOM_VK_WIN_OEM_BACKTAB * 245
DOM_VK_ATTN * 246
DOM_VK_CRSEL * 247
DOM_VK_EXSEL * 248
DOM_VK_EREOF * 249
DOM_VK_PLAY * 250
DOM_VK_ZOOM * 251
DOM_VK_PA1 * 253
DOM_VK_WIN_OEM_CLEAR * 254
initUIEvent * function initUIEvent()
Les Événemets (Events)
42 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
view * [object Window]
detail * 0
layerX * 0
layerY * 0
pageX * 0
pageY * 0
which * 9
rangeParent * [object Text]
rangeOffset * 36
SCROLL_PAGE_UP * -32768
SCROLL_PAGE_DOWN * 32768
stopPropagation * function stopPropagation()
stopImmediatePropagation * function stopImmediatePropagation()
preventDefault * function preventDefault()
initEvent * function initEvent()
getPreventDefault * function getPreventDefault()
type * keyup
target * [object HTMLBodyElement]
currentTarget * [object HTMLBodyElement]
eventPhase * 2
bubbles * true
cancelable * true
defaultPrevented * false
composed * true
timeStamp * 38355.750550160956
cancelBubble * false
originalTarget * [object HTMLBodyElement]
explicitOriginalTarget * [object HTMLBodyElement]
NONE * 0
CAPTURING_PHASE * 1
AT_TARGET * 2
BUBBLING_PHASE * 3
ALT_MASK * 1
CONTROL_MASK * 2
SHIFT_MASK * 4
META_MASK * 8
Quelques « MouseEvents » :
(click-droit),
click,
contextmenu
dblclick,
mousedown, mouseenter (triggered une seule fois pour
tous les childs), mouseleave (triggered une seule
fois pour tous les childs), mousemove, mouseout
(fired pour chaque child), mouseover (fired pour
Les Événemets (Events)
43 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
child),
mouseup,
MouseScroll...
chaque
JavaScript Tome-III
et
mousewheel
DOM-
Mouse Events obtenu avec mouseup :
<script type="text/javascript">
function codeUNICODE(event) {
for(i in event) console.log(i+" * "+event[i])
}
</script>
</head>
<body onmouseup="codeUNICODE(event)">
Frappez des touches du clavier.
</body>
Exécution :
isTrusted * true
initMouseEvent * function initMouseEvent()
getModifierState * function getModifierState()
initNSMouseEvent * function initNSMouseEvent()
screenX * 261
screenY * 260
clientX * 106
clientY * 18
x * 106
y * 18
offsetX * 98
offsetY * 10
ctrlKey * false
shiftKey * false
altKey * false
metaKey * false
button * 0
buttons * 0
relatedTarget * null
region *
movementX * 106
movementY * 18
mozPressure * 0
mozInputSource * 1
MOZ_SOURCE_UNKNOWN * 0
MOZ_SOURCE_MOUSE * 1
MOZ_SOURCE_PEN * 2
Les Événemets (Events)
44 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
MOZ_SOURCE_ERASER * 3
MOZ_SOURCE_CURSOR * 4
MOZ_SOURCE_TOUCH * 5
MOZ_SOURCE_KEYBOARD * 6
initUIEvent * function initUIEvent()
view * [object Window]
detail * 1
layerX * 106
layerY * 18
pageX * 106
pageY * 18
which * 1
rangeParent * [object Text]
rangeOffset * 18
SCROLL_PAGE_UP * -32768
SCROLL_PAGE_DOWN * 32768
stopPropagation * function stopPropagation()
stopImmediatePropagation * function stopImmediatePropagation()
preventDefault * function preventDefault()
initEvent * function initEvent()
getPreventDefault * function getPreventDefault()
type * mouseup
target * [object HTMLBodyElement]
currentTarget * [object HTMLBodyElement]
eventPhase * 2
bubbles * true
cancelable * true
defaultPrevented * false
composed * true
timeStamp * 1185.360204816174
cancelBubble * false
originalTarget * [object HTMLBodyElement]
explicitOriginalTarget * [object Text]
NONE * 0
CAPTURING_PHASE * 1
AT_TARGET * 2
BUBBLING_PHASE * 3
ALT_MASK * 1
CONTROL_MASK * 2
SHIFT_MASK * 4
META_MASK * 8
Toutes les possibilités ci-dessus mises ensemble :
<body>
<div><p>Hover this text</p></div>
Les Événemets (Events)
45 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
<p ondblclick="console.log(
'dblclick on Inline Event in < p >')">
Ré fé rence <b>Inline dblclick </b>Event
</p>
<cite>cliquez ici</cite>
<div><p><dummy>cliquez Sur ce DUMMY</dummy></p></div>
</body>
<script>
//Pointeur sur le PREMIER <div>
var vc = document.querySelector('div');
//Pointeur sur le PREMIER <p>
var pc = document.querySelector('p');
//Pointeur sur le PREMIER <cite>
var cc = document.querySelector('cite');
//Pointeur sur le PREMIER <dummy>
var dc = document.querySelector('dummy');
//On colle 1 gestionnaire d'events é vc
vc.oncontextmenu=function(){
console.log("CLICK-DROIT DANS <DIV >")
};
//On colle 3 gestionnaires d'events é pc
pc.addEventListener('mouseover' , mo);
pc.onmouseout= function mt(){
this.innerHTML = 'Revenez ici S.V.P.';
this.style.backgroundColor = 'yellow';
this.style.color = 'navy';
this.style.width = '40ex';
}
pc.addEventListener('mousedown',function(){
this.innerHTML = 'vous avez Mouse Down Ds < P >';
this.style.backgroundColor = 'red';
});
//On colle 1 gestionnaire d'events é cc
cc.addEventListener('click',oc);
//On colle 1 gestionnaire d'events é dc
dc.onclick=oc
//Cré ation des gestionnaires d'events
function mo(){
this.innerHTML = 'Cliquez Maintenant';
Les Événemets (Events)
46 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
this.style.backgroundColor = 'navy';
this.style.color = 'yellow';
this.style.width = '40ex';
}
function oc(){
this.innerHTML = 'Le click a é té savoureux !';
this.style.color = "red";
this.style.borderStyle = "dotted";
this.style.borderRadius = "7pt";
this.style.borderColor = "blue";
this.style.padding = "1em";
this.style.backgroundColor = "yellow";
this.style.width = "12em";
this.style.fontWeight = '900';
this.style.lineHeight = '3em';
}
</script>
Exécution dans console.log :
Avant les clics et survols :
Hover this text
Ré fé rence Inline dblclickEvent
cliquez ici
cliquez Sur ce DUMMY
Après manipulations :
Revenez ici S.V.P.
Ré fé rence Inline dblclick Event
Le click a été savoureux !
Le click a é té savoureux !
CLICK-DROIT DANS <DIV >
dblclick on Inline Event in < p >
event.html:26:5
event.html:1:1
Pour éviter le parasitage de votre action du click-droit par celle de Windows (menu contextuel), on désactive cette dernière ;
<body>
<div id="idiv"class="cdiv">CLIQUEZ DROIT</div>
</body>
Les Événemets (Events)
47 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
<script type="text/javascript">
document.addEventListener(
"contextmenu", d_cMenu, false);
function d_cMenu(e) {
e.preventDefault();
}
var newContextMenu=document.querySelector("#idiv");
newContextMenu.addEventListener(
"contextmenu",n_cMenu);
function n_cMenu() {
this.style.letterSpacing="2em";
this.innerHTML="Ds DIV";
}
// Un 2é Event sur le mé me é lé ment DIV.
var mousmov=document.querySelector(".cdiv");
mousmov.addEventListener(
"mousemove",function() {
this.style.letterSpacing="normal";
this.innerHTML="Vous venez de bouger ds DIV";
})
</script>
Exécution :
Avant le Click-Droit sur DIV :
CLIQUEZ DROIT
Après le Click-Droit sur DIV (pas de menu contextuel) :
D
s
D
I
V
En quittant DIV :
Vous venez de bouger ds DIV
Quelques Propriétés de « MouseEvent » :
Les Événemets (Events)
48 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
Position du curseur de la souris par rapport à l’écran :
(0,0 = Coin gauche supérieur) :
<script type="text/javascript">
document.addEventListener("mousemove", mmeh, false);
function mmeh(m) {
console.log("***Screen = "+m.screenX + "," +
m.screenY+"\nBrowser = "+m.clientX + "," +
m.clientY);
}
</script>
Exécution :
***Screen
Browser =
***Screen
Browser =
***Screen
Browser =
= 119,666
44,354
= 122,663
47,351
= 124,656
49,344
Mots-clés :
événement,event,changement d'état,environnement,eventlistener,écoute d’événement,écouteur d'événement,eventhandler,gestionnaire d’événement,langage événementiel,programmation
événémentielle,addEventListener,eventHandler,removeEventListener,DOM
mardi, 2. octobre 2018 (11:56 ).
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Informaticien-amateur, Programmeur et WebMaster.
Les Événemets (Events)
49 / 50
mardi, 2. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-III
Chercheur indépendant, autonome et autofinancé, bénévole,
sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte
promotionnelle avec
qui qu’il soit ou quelqu’organisme ou institution / organisation
que ce soit, étatique, paraétatique ou privé, industriel ou
commercial en relation avec le sujet présenté.
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
diasfb mail2world.com
Les Événemets (Events)
50 / 50
mardi, 2. octobre 2018