Javascript - Tome - VIII - Events

LES EVENTS
(événements)
J AVA S C R I P T (Programmation Internet) V O L . I I I
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga

+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 survenant sur un objet (change-

ment d'état de l'environnement qui peut être intercepté par le code Ja-
vaScript) : 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)
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-III
Équivalent de :
<é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)
La variable système « event » se déclenche à la survenue d’un event.
Exemples de quelques Event-listeners en action :
Afficher les propriétés de l’Event-listener « mouseup » :
<script type="text/javascript">
function disp(event) {
console.log(event);
}
</script>
<a onmouseup="disp(event)">Cliquez ici.</a>
Exécution :
Les Événemets (Events) 2 / 76 mercredi, 23. janvier 2019

Firefox :
Cliquez ici.

Yandex :

Afficher les propriétés de l’Event-listener « keyup » :
console.log(event);
}
</script>
</head>
<body onkeyup="disp(event)">
Tapez des touches du clavier.
</body>
Exécution :

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 ,

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 :
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 Securi-

ty Policy
Timer :
setTimeout , clearTimeout , setInterval ,

clearInterval , setTimeout fired ,
setInterval fired

Touch :
touchstart , touchmove , touchend , touchcancel
Window :
window.close
XHR :
readystatechange , load , loadstart , loadend ,

abort , error , progress , timeout
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)...
Signification de quelques Event-listeners les plus courants :
• onabort = Interruption de chargement d’image

• onblur = Perte de focus d’un élément
• onchange = Le contenu d’un champ a changé
• onclick = Click de la sourie sur un objet
• ondblclick = Dble-Click de la sourie sur un objet
• onerror = Erreur lors du chargement de la page ou d’une image
• onfocus = Un élément prend le focus
• onkeydown = Frappe sur une touche du clavier
• 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 se charge complètement
• onmousedown = Click sur un bouton de la sourie
• onmousemove = La sourie a bougé
• onmouseout = La sourie est retirée d’un élément
• onmouseover = La sourie est placée sur un élément
• onmouseup = Un bouton de la sourie est relâché
• onreset = Le bouton reset est clické
• onresize = Fenêtre ou frame a changé de taille
• onselect = Du Texte a été sélectionné
• onsubmit = Le bouton submit a été clické
• onunload = Fermeture de la page (déchargement)
Liste de quelques events avec modèle de valeur :
onabort: null ; onafterscriptexecute: null ; onanima-

tioncancel: null ; onanimationend: null ; onanimati-
oniteration: null ; onanimationstart: null ; onauxclick:
null ; onbeforescriptexecute: null ; onblur: null ;
oncanplay: null ; oncanplaythrough: null ; onchange: null ;
onclick: function onclick() ; onclick: null ; onclose:
null ; oncontextmenu: null ; oncopy: null ; oncut: null ;
ondblclick: null ; ondrag: null ; ondragend: null ; ondra-
genter: null ; ondragexit: null ; ondragleave: null ;
ondragover: null ; ondragstart: null ; ondrop: null ; on-
durationchange: null ; onemptied: null ; onended: null ;
onerror: null ; onfocus: null ; oninput: null ; oninvalid:
null ; onkeydown: null ; onkeypress: null ; onkeyup: null ;
onload: null ; onloadeddata: null ; onloadedmetadata:
null ; onloadend: null ; onloadstart: null ; onmousedown:
null ; onmouseenter: null ; onmouseleave: null ; onmouse-
move: null ; onmouseout: null ; onmouseover: null ; on-
mouseup: null ; onmozfullscreenchange: null ; onmozfull-
screenerror: null ; onpaste: null ; onpause: null ; onplay:
null ; onplaying: null ; onpointerlockchange: null ; on-
pointerlockerror: 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 ; ontran-
sitionrun: null ; ontransitionstart: null ; onvisibil-
itychange: null ; onvolumechange: null ; onwaiting: null ;
onwebkitanimationend: null ; onwebkitanimationiteration:
null ; onwebkitanimationstart: null ; onwebkittransi-
tionend: null ; onwheel: null ; ownerDocument: null.
Le « KeyBoard Event onkeyup » avec « event.keyCode » :
let t= "" ;
function codeUNICODE(event) {
t += event.keyCode + " | ";
console.log(t);
}
</script>
<body onkeyup=" codeUNICODE(event)">

Tapez « azerty ».
</body>
Ça donne les mêmes codes pour MAJUSCULES ou minuscules.
Quelques keyboard Codes :

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
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
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_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
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_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()
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 stopImmediatePropaga-
tion()
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
charCode * 0
keyCode * 9
altKey * false
ctrlKey * false
shiftKey * false
metaKey * false
location * 0
repeat * false
isComposing * false
key * Tab
code * Tab
DOM_VK_CANCEL * 3
DOM_VK_HELP * 6
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_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_ACCEPT * 30
DOM_VK_SPACE * 32
DOM_VK_PAGE_UP * 33
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_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_EQUALS * 61
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_SLEEP * 95
DOM_VK_NUMPAD0 * 96
DOM_VK_NUMPAD1 * 97
DOM_VK_NUMPAD2 * 98
DOM_VK_NUMPAD3 * 99
DOM_VK_ADD * 107
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_HASH * 163
DOM_VK_DOLLAR * 164
DOM_VK_PLUS * 171
DOM_VK_PIPE * 172
DOM_VK_TILDE * 176
DOM_VK_COMMA * 188
DOM_VK_PERIOD * 190
DOM_VK_SLASH * 191
DOM_VK_QUOTE * 222
DOM_VK_META * 224
DOM_VK_ALTGR * 225
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
detail * 0
layerX * 0
layerY * 0
pageX * 0
pageY * 0
which * 9
rangeOffset * 36
tion()
type * keyup
eventPhase * 2
bubbles * true
cancelable * true
composed * true
timeStamp * 38355.750550160956
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, contextmenu (click-droit), 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 chaque child), mouseup, mouse-
wheel et DOMMouseScroll...
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";

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"
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"
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 :

console.dir(Document.prototype)
</script>
Avec YANDEX :
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:(...)
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:(...)
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:(...)
...

Avec FIREFOX :
DocumentPrototype { getElementsByTagName: getEle-

mentsByTagName(), getElementsByTagNameNS: getEle-
mentsByTagNameNS(), getElementsByClassName: getEle-
mentsByClassName(), getElementById: getElementById(),
createElement: createElement(), createElementNS: cre-
ateElementNS(), createDocumentFragment: createDocu-
mentFragment(), createTextNode: createTextNode(),
createComment: createComment(), createProcessingIn-
struction: 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
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
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 :

console.dir(document)
</script>
Avec FIREFOX :
...
onabort: null
onafterscriptexecute: null
onanimationcancel: null
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
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
onwebkittransitionend: null
onwheel: null
...
Liste de quelques events du prototype du constructeur (HTMLDo-

cumentPrototype) de l’objet document :
Avec YANDEX :
document.__proto__
HTMLDocument {constructor: ƒ, Sym-
bol(Symbol.toStringTag): "HTMLDocument"}
1er onabort:(...)
2e onauxclick:(...)
6e onblur:(...)
7e oncancel:(...)
8e oncanplay:(...)
10e onchange:(...)
11e onclick:(...)
12e onclose:(...)
14e oncopy:(...)
16e oncut:(...)
18e ondrag:(...)
19e ondragend:(...)
24e ondrop:(...)
26e onemptied:(...)
27e onended:(...)
28e onerror:(...)
29e onfocus:(...)
31e oninput:(...)
32e oninvalid:(...)
33e onkeydown:(...)
35e onkeyup:(...)
36e onload:(...)
47e onmouseup:(...)
49e onpaste:(...)
50e onpause:(...)
51e onplay:(...)
52e onplaying:(...)
66e onreset:(...)
67e onresize:(...)
68e onscroll:(...)
69e onsearch:(...)
70e onseeked:(...)
71e onseeking:(...)
72e onselect:(...)
75e onstalled:(...)
76e onsubmit:(...)
77e onsuspend:(...)
79e ontoggle:(...)
82e onwaiting:(...)
85e onwheel:(...)

Avec FIREFOX :
document.__proto__
HTMLDocumentPrototype { open: open(), close: close(),

write: write(), writeln: writeln(), execCommand: ex-
ecCommand(), queryCommandEnabled: queryCommandEna-
bled(), queryCommandIndeterm: queryCommandIndeterm(),
queryCommandState: queryCommandState(), queryCommand-
Supported: queryCommandSupported(), query-
CommandValue: queryCommandValue(), … }
__proto__: DocumentPrototype { getElementsByTagName:

getElementsByTagName(), getElementsByTagNameNS:
getElementsByTagNameNS(), getElementsByClassName:
getElementsByClassName(), … }
Liste de quelques events du prototype du constructeur du construc-

teur (« Document ») de l’objet document :
Avec YANDEX :
document.__proto__.__proto__
Document {…}
1er onabort:(...)
2e onauxclick:(...)
6e onblur:(...)
7e oncancel:(...)
8e oncanplay:(...)
10e onchange:(...)
11e onclick:(...)
12e onclose:(...)
14e oncopy:(...)
16e oncut:(...)
18e ondrag:(...)
19e ondragend:(...)
24e ondrop:(...)
26e onemptied:(...)
27e onended:(...)
28e onerror:(...)
29e onfocus:(...)
31e oninput:(...)
32e oninvalid:(...)
33e onkeydown:(...)
35e onkeyup:(...)
36e onload:(...)
47e onmouseup:(...)

49e onpaste:(...)
50e onpause:(...)
51e onplay:(...)
52e onplaying:(...)
66e onreset:(...)
67e onresize:(...)
68e onscroll:(...)
69e onsearch:(...)
70e onseeked:(...)
71e onseeking:(...)
72e onselect:(...)
75e onstalled:(...)
76e onsubmit:(...)
77e onsuspend:(...)
79e ontoggle:(...)
82e onwaiting:(...)
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:ƒ ()
14e set oncancel:ƒ ()
15e get oncanplay:ƒ ()
16e set oncanplay:ƒ ()
17e get oncanplaythrough:ƒ ()
18e set oncanplaythrough:ƒ ()
19e get onchange:ƒ ()
20e set onchange:ƒ ()
21e get onclick:ƒ ()
22e set onclick:ƒ ()
23e get onclose:ƒ ()
24e set onclose:ƒ ()
25e get oncontextmenu:ƒ ()
26e set oncontextmenu:ƒ ()
27e get oncopy:ƒ ()
28e set oncopy:ƒ ()
29e get oncuechange:ƒ ()
30e set oncuechange:ƒ ()
31e get oncut:ƒ ()
32e set oncut:ƒ ()
33e get ondblclick:ƒ ()
34e set ondblclick:ƒ ()
35e get ondrag:ƒ ()
36e set ondrag:ƒ ()
37e get ondragend:ƒ ()

38e set ondragend:ƒ ()
39e get ondragenter:ƒ ()
40e set ondragenter:ƒ ()
41e get ondragleave:ƒ ()
42e set ondragleave:ƒ ()
43e get ondragover:ƒ ()
44e set ondragover:ƒ ()
45e get ondragstart:ƒ ()
46e set ondragstart:ƒ ()
47e get ondrop:ƒ ()
48e set ondrop:ƒ ()
49e get ondurationchange:ƒ ()
50e set ondurationchange:ƒ ()
51e get onemptied:ƒ ()
52e set onemptied:ƒ ()
53e get onended:ƒ ()
54e set onended:ƒ ()
55e get onerror:ƒ ()
56e set onerror:ƒ ()
57e get onfocus:ƒ ()
58e set onfocus:ƒ ()
59e get ongotpointercapture:ƒ ()
60e set ongotpointercapture:ƒ ()
61e get oninput:ƒ ()
62e set oninput:ƒ ()
63e get oninvalid:ƒ ()
64e set oninvalid:ƒ ()
65e get onkeydown:ƒ ()
66e set onkeydown:ƒ ()
67e get onkeypress:ƒ ()
68e set onkeypress:ƒ ()
69e get onkeyup:ƒ ()
70e set onkeyup:ƒ ()
71e get onload:ƒ ()
72e set onload:ƒ ()
73e get onloadeddata:ƒ ()
74e set onloadeddata:ƒ ()
75e get onloadedmetadata:ƒ ()

76e set onloadedmetadata:ƒ ()
77e get onloadstart:ƒ ()
78e set onloadstart:ƒ ()
79e get onlostpointercapture:ƒ ()
80e set onlostpointercapture:ƒ ()
81e get onmousedown:ƒ ()
82e set onmousedown:ƒ ()
83e get onmouseenter:ƒ ()
84e set onmouseenter:ƒ ()
85e get onmouseleave:ƒ ()
86e set onmouseleave:ƒ ()
87e get onmousemove:ƒ ()
88e set onmousemove:ƒ ()
89e get onmouseout:ƒ ()
90e set onmouseout:ƒ ()
91e get onmouseover:ƒ ()
92e set onmouseover:ƒ ()
93e get onmouseup:ƒ ()
94e set onmouseup:ƒ ()
95e get onmousewheel:ƒ ()
96e set onmousewheel:ƒ ()
97e get onpaste:ƒ ()
98e set onpaste:ƒ ()
99e get onpause:ƒ ()
100e set onpause:ƒ ()
101e get onplay:ƒ ()
102e set onplay:ƒ ()
103e get onplaying:ƒ ()
104e set onplaying:ƒ ()
105e get onpointercancel:ƒ ()
106e set onpointercancel:ƒ ()
107e get onpointerdown:ƒ ()
108e set onpointerdown:ƒ ()
109e get onpointerenter:ƒ ()
110e set onpointerenter:ƒ ()
111e get onpointerleave:ƒ ()
112e set onpointerleave:ƒ ()
113e get onpointerlockchange:ƒ ()

114e set onpointerlockchange:ƒ ()
115e get onpointerlockerror:ƒ ()
116e set onpointerlockerror:ƒ ()
117e get onpointermove:ƒ ()
118e set onpointermove:ƒ ()
119e get onpointerout:ƒ ()
120e set onpointerout:ƒ ()
121e get onpointerover:ƒ ()
122e set onpointerover:ƒ ()
123e get onpointerup:ƒ ()
124e set onpointerup:ƒ ()
125e get onprogress:ƒ ()
126e set onprogress:ƒ ()
127e get onratechange:ƒ ()
128e set onratechange:ƒ ()
129e get onreadystatechange:ƒ ()
130e set onreadystatechange:ƒ ()
131e get onreset:ƒ ()
132e set onreset:ƒ ()
133e get onresize:ƒ ()
134e set onresize:ƒ ()
135e get onscroll:ƒ ()
136e set onscroll:ƒ ()
137e get onsearch:ƒ ()
138e set onsearch:ƒ ()
139e get onseeked:ƒ ()
140e set onseeked:ƒ ()
141e get onseeking:ƒ ()
142e set onseeking:ƒ ()
143e get onselect:ƒ ()
144e set onselect:ƒ ()
145e get onselectionchange:ƒ ()
146e set onselectionchange:ƒ ()
147e get onselectstart:ƒ ()
148e set onselectstart:ƒ ()
149e get onstalled:ƒ ()
150e set onstalled:ƒ ()
151e get onsubmit:ƒ ()

152e set onsubmit:ƒ ()
153e get onsuspend:ƒ ()
154e set onsuspend:ƒ ()
155e get ontimeupdate:ƒ ()
156e set ontimeupdate:ƒ ()
157e get ontoggle:ƒ ()
158e set ontoggle:ƒ ()
159e get onvisibilitychange:ƒ ()
160e set onvisibilitychange:ƒ ()
161e get onvolumechange:ƒ ()
162e set onvolumechange:ƒ ()
163e get onwaiting:ƒ ()
164e set onwaiting:ƒ ()
165e get onwebkitfullscreenchange:ƒ ()
166e set onwebkitfullscreenchange:ƒ ()
167e get onwebkitfullscreenerror:ƒ ()
168e set onwebkitfullscreenerror:ƒ ()
169e get onwheel:ƒ ()
170e set onwheel:ƒ ()
...
1er __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
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
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: getRoot-
Node(), 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 chan-
gé
• 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 (de-
vient la zone d'entrée active)
• onfocusout = Un élément de formulaire perd le focus
• onkeydown = Une touche du clavier a été enfoncée
• 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 ,

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 :
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 Securi-

ty Policy
Timer :
setTimeout , clearTimeout , setInterval ,

clearInterval , setTimeout fired ,
setInterval fired
Touch :
touchstart , touchmove , touchend , touchcancel
Window :
window.close

XHR :
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 pro-
priétés donnent des informations sur l’événement.
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
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 {fire-
sTouchEvents: 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, configura-
ble: false, get: ƒ}
__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
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: in-
itMouseEvent(), getModifierState: getModifierState(), in-
itNSMouseEvent: 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
Contenu de l’objet « Event keyup » de la souris :
console.log(event);
}
</script>
</head>
<body onkeyup="disp(event)">
Cliquez ici.
</body>
Exécution :

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>
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 :

68 70 83 68 90 70 9 67 17 91 17 16 0 93 27 32 48 16
Quelques keyboard Codes :
isTrusted * true
charCode * 0
keyCode * 68
altKey * false
ctrlKey * false
shiftKey * false
metaKey * false
location * 0
repeat * false
isComposing * false
key * d
code * KeyD
DOM_VK_CANCEL * 3
DOM_VK_HELP * 6
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_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_ACCEPT * 30
DOM_VK_SPACE * 32
DOM_VK_PAGE_UP * 33
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_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_EQUALS * 61
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
DOM_VK_Y * 89
DOM_VK_Z * 90
DOM_VK_WIN * 91
DOM_VK_SLEEP * 95
DOM_VK_NUMPAD0 * 96
DOM_VK_NUMPAD1 * 97
DOM_VK_NUMPAD2 * 98
DOM_VK_NUMPAD3 * 99
DOM_VK_ADD * 107
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_HASH * 163
DOM_VK_DOLLAR * 164
DOM_VK_PLUS * 171
DOM_VK_PIPE * 172
DOM_VK_TILDE * 176
DOM_VK_COMMA * 188
DOM_VK_PERIOD * 190
DOM_VK_SLASH * 191
DOM_VK_QUOTE * 222
DOM_VK_META * 224
OM_VK_ALTGR * 225
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
detail * 0
layerX * 0
layerY * 0
pageX * 0
pageY * 0
which * 68
rangeOffset * 36
tion()
type * keyup
eventPhase * 2
bubbles * true
cancelable * true
composed * true
timeStamp * 26858.731007798015
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
charCode * 0
keyCode * 9
altKey * false
ctrlKey * false
shiftKey * false
metaKey * false
location * 0
repeat * false
isComposing * false
key * Tab
code * Tab
DOM_VK_CANCEL * 3
DOM_VK_HELP * 6
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_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_ACCEPT * 30
DOM_VK_SPACE * 32
DOM_VK_PAGE_UP * 33
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_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_EQUALS * 61
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_SLEEP * 95
DOM_VK_NUMPAD0 * 96
DOM_VK_NUMPAD1 * 97
DOM_VK_NUMPAD2 * 98
DOM_VK_NUMPAD3 * 99
DOM_VK_ADD * 107
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_HASH * 163
DOM_VK_DOLLAR * 164
DOM_VK_PLUS * 171
DOM_VK_PIPE * 172
DOM_VK_TILDE * 176
DOM_VK_COMMA * 188
DOM_VK_PERIOD * 190
DOM_VK_SLASH * 191
DOM_VK_QUOTE * 222
DOM_VK_META * 224
DOM_VK_ALTGR * 225
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
detail * 0
layerX * 0
layerY * 0
pageX * 0
pageY * 0
which * 9
rangeOffset * 36
tion()
type * keyup
eventPhase * 2
bubbles * true
cancelable * true
composed * true
timeStamp * 38355.750550160956
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, contextmenu (click-droit), 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
chaque child), mouseup, mousewheel et DOM-
MouseScroll...
Mouse Codes obtenus avec mouseup :

for(i in event) console.log(i+" * "+event[i])
}
</script>
</head>
<body onmouseup="codeUNICODE(event)">
</body>
Exécution :
isTrusted * true
initMouseEvent * function initMouseEvent()
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
MOZ_SOURCE_ERASER * 3
MOZ_SOURCE_CURSOR * 4
MOZ_SOURCE_TOUCH * 5

MOZ_SOURCE_KEYBOARD * 6
detail * 1
layerX * 106
layerY * 18
pageX * 106
pageY * 18
which * 1
rangeOffset * 18
tion()
type * mouseup
eventPhase * 2
bubbles * true
cancelable * true
composed * true
timeStamp * 1185.360204816174
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>
<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';
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 > event.html:26:5
dblclick on Inline Event in < p > event.html:1:1
Pour éviter le parasitage de votre action du click-droit par celle de Win-

dows (menu contextuel), on désactive cette dernière ;
<body>
<div id="idiv"class="cdiv">CLIQUEZ DROIT</div>
</body>
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 » :
Position du curseur de la souris par rapport à l’écran :

(0,0 = Coin gauche supérieur) :
document.addEventListener("mousemove", mmeh, false);
function mmeh(m) {
console.log("***Screen = "+m.screenX + "," +
m.screenY+"\nBrowser = "+m.clientX + "," +
m.clientY);
}
</script>
Exécution :
***Screen = 119,666
Browser = 44,354
***Screen = 122,663
Browser = 47,351
***Screen = 124,656
Browser = 49,344
Mots-clés :
événement,event,changement d'état,environnement,event-listener,écoute
d’événement,écouteur d'événement,event-handler,gestionnaire

d’événement,langage événementiel,programmation événémen-
tielle,addEventListener,eventHandler,removeEventListener,DOM
mercredi, 23. janvier 2019 (6:07 ).
DIASOLUKA Nz. Luyalu

Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Informaticien-amateur, Programmeur et WebMaster.
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
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-
Secret-de-La-Creation
D’autres publications pouvant aussi intéresser :

• https://www.scribd.com/document/377036251/Le-Dosage-
Des-Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-
Des-Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-
Introduction-Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-
Jesus-Christ-Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-
visuelle-angulaire
• https://www.scribd.com/document/375349851/La-
variable-This
• https://www.scribd.com/document/375024162/Fonctions-
Imbriquees-en-JS
• https://www.scribd.com/document/374789297/Format-
Interne-Des-Objets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-
en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-
Grand-Secret-de-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-
Formule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/Property-
Descriptors
• https://www.scribd.com/document/373833282/l-Objet-
Global-Window
• https://www.scribd.com/document/372665249/Javascript-
Tome-II
• https://www.scribd.com/document/355291488/motilite-
oculaire-2
• https://www.scribd.com/document/355291239/motilite-
oculaire-I
• https://www.scribd.com/document/355290248/Script-d-
Analyses-Des-Reflexes-Pupillomoteurs
•
https://www.scribd.com/document/321168468/Renseignem
ents-Id-et-Anthropometriques
• https://www.scribd.com/document/320856721/Emission-
31-Jul-2016
•
https://www.scribd.com/document/318182982/Complication
-Visuelle-du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-
Entre-Oxymetrie-Et-Type-Respiration
•
https://www.scribd.com/document/315746265/Classificatio
n-Des-Medicaments
•
https://www.scribd.com/document/315745909/Incongruenc
es-Heresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-
Entre-Oxymetrie-Et-Type-Respiration

Javascript - Tome - VIII - Events

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript - Tome - VIII - Events

Transféré par

Droits d'auteur :

Formats disponibles

LES EVENTS

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga

CHAPITRE 7 : LES EVENTS (événements) :

Un événement (event) est toute action survenant sur un objet (change-

Un event-listener (fonction « d’écoute d’événement » ou « écouteur

Un event-handler (fonction « gestionnaire d’événement ») est la fonc-

La programmation événémentielle est celle qui permet la gestion

Syntaxe [très simple et intuitive] pour associer (lier) un événement à

<élément onclick="code javaScript;"></élément>

Il suffit simplement ci-dessus de connaître les différents eventlisteners

Syntaxe pour désabonner un objet d’un eventlistener.

La variable système « event » se déclenche à la survenue d’un event.

Exemples de quelques Event-listeners en action :

Afficher les propriétés de l’Event-listener « mouseup » :

<a onmouseup="disp(event)">Cliquez ici.</a>

Les Événemets (Events) 2 / 76 mercredi, 23. janvier 2019

Les Événemets (Events) 3 / 76 mercredi, 23. janvier 2019

Les Événemets (Events) 4 / 76 mercredi, 23. janvier 2019

Afficher les propriétés de l’Event-listener « keyup » :

Tapez des touches du clavier.

Les Événemets (Events) 5 / 76 mercredi, 23. janvier 2019

Quelques Event Listeners Breakpoints :

Request Animation Frame,

Create canvas context,

copy , cut , paste , beforecopy ,

resize , scroll , zoom , focus , blur ,

Les Événemets (Events) 6 / 76 mercredi, 23. janvier 2019

DOMActivate , DOMFocusIn , DOMFocusOut ,

dragenter , dragover , dragleave , drop

keydown , keyup , keypress , input

load , beforeunload , unload , abort , error ,

play , pause , playing , canplay , canplaythrough ,

Les Événemets (Events) 7 / 76 mercredi, 23. janvier 2019

auxclick , click , dblclick , mousedown , mouseup ,

Set innerHTML , document.write

pointerover , pointerout , pointerenter ,

Script First Statement , Script Blocked by Content Securi-

setTimeout , clearTimeout , setInterval ,

Les Événemets (Events) 8 / 76 mercredi, 23. janvier 2019

touchstart , touchmove , touchend , touchcancel

readystatechange , load , loadstart , loadend ,

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

Signification de quelques Event-listeners les plus courants :

• onabort = Interruption de chargement d’image

Liste de quelques events avec modèle de valeur :

onabort: null ; onafterscriptexecute: null ; onanima-

Les Événemets (Events) 10 / 76 mercredi, 23. janvier 2019

Le « KeyBoard Event onkeyup » avec « event.keyCode » :

<body onkeyup=" codeUNICODE(event)">

Ça donne les mêmes codes pour MAJUSCULES ou minuscules.

Quelques keyboard Codes :

Les Événemets (Events) 11 / 76 mercredi, 23. janvier 2019

click, contextmenu (click-droit), dblclick, mousedown, mouseenter

Liste de quelques event listeners de l’objet window :

Pour avoir les équivalents DOM de ces listeners il suffit de supprimer le

<script type="text/javascript"> "use strict";

Array [ "ondevicemotion", "ondeviceorientation", "onabso-

Liste de quelques events de l’objet Document :

<script type="text/javascript"> "use strict";

Les Événemets (Events) 27 / 76 mercredi, 23. janvier 2019

Les Événemets (Events) 28 / 76 mercredi, 23. janvier 2019

proto: DocumentPrototype { getElementsByTagName: