javascript tome viii - Events

Transcription

LES EVENTS (événements)
Pour Débuter
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 (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)
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, listenerFunction)
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
jeudi, 4. avril 2019
JavaScript Tome-III
Firefox :
Cliquez ici.
3 / 76
JavaScript Tome-III
Yandex :
…
…
…
…
…
…
4 / 76
JavaScript Tome-III
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 :
5 / 76
JavaScript Tome-III
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
6 / 76
JavaScript Tome-III
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 :
7 / 76
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
8 / 76
JavaScript Tome-III
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, 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)...
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
9 / 76
JavaScript Tome-III
• 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 ; onanimationcancel: null ; onanimationend: null ; onanimationiteration: 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 ; ondragenter: null ; ondragexit: null ; ondragleave: null ;
ondragover: null ; ondragstart: null ; ondrop: null ; ondurationchange: 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 ; onmousemove: null ; onmouseout: null ; onmouseover: null ; onmouseup: null ; onmozfullscreenchange: null ; onmozfullscreenerror: null ; onpaste: null ; onpause: null ; onplay:
null ; onplaying: null ; onpointerlockchange: null ; onpointerlockerror: 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 ; ownerDocument: null.
10 / 76
JavaScript Tome-III
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
11 / 76
JavaScript Tome-III
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
12 / 76
JavaScript Tome-III
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
13 / 76
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_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
14 / 76
JavaScript Tome-III
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
15 / 76
JavaScript Tome-III
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 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
16 / 76
JavaScript Tome-III
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
17 / 76
JavaScript Tome-III
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
18 / 76
JavaScript Tome-III
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
19 / 76
JavaScript Tome-III
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
20 / 76
JavaScript Tome-III
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
21 / 76
JavaScript Tome-III
layerX * 0
layerY * 0
pageX * 0
pageY * 0
which * 9
rangeOffset * 36
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
22 / 76
JavaScript Tome-III
chaque child), mouseover (fired pour chaque child), mouseup, mousewheel 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";
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"
23 / 76
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
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:
JavaScript Tome-III
"onclose"
"oncontextmenu"
"ondblclick"
"ondrag"
"ondragend"
"ondragenter"
"ondragexit"
"ondragleave"
"ondragover"
"ondragstart"
"ondrop"
"ondurationchange"
"onemptied"
"onended"
"oninput"
"oninvalid"
"onkeydown"
"onkeypress"
"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"
24 / 76
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
JavaScript Tome-III
"onstalled"
"onsubmit"
"onsuspend"
"ontimeupdate"
"onvolumechange"
"onwaiting"
"onselectstart"
"ontoggle"
"onpointercancel"
"onpointerdown"
"onpointerup"
"onpointermove"
"onpointerout"
"onpointerover"
"onpointerenter"
"onpointerleave"
"ongotpointercapture"
"onlostpointercapture"
"onmozfullscreenchange"
"onmozfullscreenerror"
"onanimationcancel"
"onanimationend"
"onanimationiteration"
"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"
25 / 76
105:
106:
107:
108:
109:
JavaScript Tome-III
"onpagehide"
"onpageshow"
"onpopstate"
"onstorage"
"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:(...)
26 / 76
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
52e
53e
54e
55e
56e
57e
58e
JavaScript Tome-III
ondragleave:(...)
ondragover:(...)
ondragstart:(...)
ondrop:(...)
ondurationchange:(...)
onemptied:(...)
onended:(...)
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:(...)
27 / 76
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
...
JavaScript Tome-III
onpointermove:(...)
onpointerout:(...)
onpointerover:(...)
onpointerup:(...)
onprogress:(...)
onratechange:(...)
onreadystatechange:(...)
onreset:(...)
onresize:(...)
onscroll:(...)
onsearch:(...)
onseeked:(...)
onseeking:(...)
onselect:(...)
onselectionchange:(...)
onselectstart:(...)
onstalled:(...)
onsubmit:(...)
onsuspend:(...)
ontimeupdate:(...)
ontoggle:(...)
onvisibilitychange:(...)
onvolumechange:(...)
onwaiting:(...)
onwebkitfullscreenchange:(...)
onwebkitfullscreenerror:(...)
onwheel:(...)
Avec FIREFOX :
DocumentPrototype { getElementsByTagName: getElementsByTagName(), getElementsByTagNameNS: getElementsByTagNameNS(), getElementsByClassName: getElementsByClassName(), getElementById: getElementById(),
createElement: createElement(), createElementNS: createElementNS(), createDocumentFragment: createDocumentFragment(), createTextNode: createTextNode(),
28 / 76
JavaScript Tome-III
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
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
29 / 76
JavaScript Tome-III
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
30 / 76
JavaScript Tome-III
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
31 / 76
JavaScript Tome-III
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
32 / 76
JavaScript Tome-III
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
33 / 76
JavaScript Tome-III
onvisibilitychange: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkittransitionend: null
onwheel: null
...
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:(...)
6e onblur:(...)
7e oncancel:(...)
8e oncanplay:(...)
10e
onchange:(...)
11e
onclick:(...)
12e
onclose:(...)
13e
oncontextmenu:(...)
14e
oncopy:(...)
15e
oncuechange:(...)
16e
oncut:(...)
17e
ondblclick:(...)
34 / 76
18e
ondrag:(...)
19e
ondragend:(...)
20e
ondragenter:(...)
21e
ondragleave:(...)
22e
ondragover:(...)
23e
ondragstart:(...)
24e
ondrop:(...)
25e
26e
onemptied:(...)
27e
onended:(...)
28e
onerror:(...)
29e
onfocus:(...)
30e
31e
oninput:(...)
32e
oninvalid:(...)
33e
onkeydown:(...)
34e
onkeypress:(...)
35e
onkeyup:(...)
36e
onload:(...)
37e
onloadeddata:(...)
38e
39e
onloadstart:(...)
40e
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
54e
onpointerdown:(...)
55e
56e
35 / 76
JavaScript Tome-III
57e
58e
59e
onpointermove:(...)
60e
onpointerout:(...)
61e
onpointerover:(...)
62e
onpointerup:(...)
63e
onprogress:(...)
64e
onratechange:(...)
65e
66e
onreset:(...)
67e
onresize:(...)
68e
onscroll:(...)
69e
onsearch:(...)
70e
onseeked:(...)
71e
onseeking:(...)
72e
onselect:(...)
73e
74e
onselectstart:(...)
75e
onstalled:(...)
76e
onsubmit:(...)
77e
onsuspend:(...)
78e
ontimeupdate:(...)
79e
ontoggle:(...)
80e
81e
82e
onwaiting:(...)
83e
84e
85e
onwheel:(...)
JavaScript Tome-III
Avec FIREFOX :
document.__proto__
HTMLDocumentPrototype { open: open(), close: close(),
write: write(), writeln: writeln(), execCommand: execCommand(), queryCommandEnabled: queryCommandEnaLes Événemets (Events)
36 / 76
JavaScript Tome-III
bled(), queryCommandIndeterm: queryCommandIndeterm(),
queryCommandState: queryCommandState(), queryCommandSupported: queryCommandSupported(), queryCommandValue: queryCommandValue(), … }
__proto__: DocumentPrototype { getElementsByTagName:
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:(...)
6e onblur:(...)
7e oncancel:(...)
8e oncanplay:(...)
10e
onchange:(...)
11e
onclick:(...)
12e
onclose:(...)
13e
oncontextmenu:(...)
14e
oncopy:(...)
15e
oncuechange:(...)
16e
oncut:(...)
17e
ondblclick:(...)
18e
ondrag:(...)
37 / 76
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
52e
53e
54e
55e
56e
JavaScript Tome-III
ondragend:(...)
ondragenter:(...)
ondragleave:(...)
ondragover:(...)
ondragstart:(...)
ondrop:(...)
onemptied:(...)
onended:(...)
onerror:(...)
onfocus:(...)
oninput:(...)
oninvalid:(...)
onkeydown:(...)
onkeypress:(...)
onkeyup:(...)
onload:(...)
onloadeddata:(...)
onloadstart:(...)
onmousedown:(...)
onmouseenter:(...)
onmouseleave:(...)
onmousemove:(...)
onmouseout:(...)
onmouseover:(...)
onmouseup:(...)
onmousewheel:(...)
onpaste:(...)
onpause:(...)
onplay:(...)
onplaying:(...)
onpointerdown:(...)
38 / 76
JavaScript Tome-III
57e
58e
59e
onpointermove:(...)
60e
onpointerout:(...)
61e
onpointerover:(...)
62e
onpointerup:(...)
63e
onprogress:(...)
64e
onratechange:(...)
65e
66e
onreset:(...)
67e
onresize:(...)
68e
onscroll:(...)
69e
onsearch:(...)
70e
onseeked:(...)
71e
onseeking:(...)
72e
onselect:(...)
73e
74e
onselectstart:(...)
75e
onstalled:(...)
76e
onsubmit:(...)
77e
onsuspend:(...)
78e
ontimeupdate:(...)
79e
ontoggle:(...)
80e
81e
82e
onwaiting:(...)
83e
84e
85e
onwheel:(...)
...
1er
get onabort:ƒ ()
2e set onabort:ƒ ()
3e get onauxclick:ƒ ()
4e set onauxclick:ƒ ()
5e get onbeforecopy:ƒ ()
6e set onbeforecopy:ƒ ()
7e get onbeforecut:ƒ ()
39 / 76
JavaScript Tome-III
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:ƒ ()
40 / 76
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
81e
82e
83e
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
set
get
set
get
JavaScript Tome-III
ondragstart:ƒ ()
ondrop:ƒ ()
ondrop:ƒ ()
ondurationchange:ƒ ()
ondurationchange:ƒ ()
onemptied:ƒ ()
onemptied:ƒ ()
onended:ƒ ()
onended:ƒ ()
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:ƒ ()
41 / 76
84e
85e
86e
87e
88e
89e
90e
91e
92e
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
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
set
get
set
get
JavaScript Tome-III
onmouseenter:ƒ ()
onmouseleave:ƒ ()
onmouseleave:ƒ ()
onmousemove:ƒ ()
onmousemove:ƒ ()
onmouseout:ƒ ()
onmouseout:ƒ ()
onmouseover:ƒ ()
onmouseover:ƒ ()
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:ƒ ()
42 / 76
122e
123e
124e
125e
126e
127e
128e
129e
130e
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
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
set
get
set
get
JavaScript Tome-III
onpointerover:ƒ ()
onpointerup:ƒ ()
onpointerup:ƒ ()
onprogress:ƒ ()
onprogress:ƒ ()
onratechange:ƒ ()
onratechange:ƒ ()
onreadystatechange:ƒ ()
onreadystatechange:ƒ ()
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:ƒ ()
43 / 76
160e
161e
162e
163e
164e
165e
166e
167e
168e
169e
170e
...
1er
set
get
set
get
set
get
set
get
set
get
set
JavaScript Tome-III
onvisibilitychange:ƒ ()
onvolumechange:ƒ ()
onvolumechange:ƒ ()
onwaiting:ƒ ()
onwaiting:ƒ ()
onwebkitfullscreenchange:ƒ ()
onwebkitfullscreenchange:ƒ ()
onwebkitfullscreenerror:ƒ ()
onwebkitfullscreenerror:ƒ ()
onwheel:ƒ ()
onwheel:ƒ ()
__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
44 / 76
JavaScript Tome-III
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
45 / 76
JavaScript Tome-III
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: getRootNode(), hasChildNodes: hasChildNodes(), insertBefore:
insertBefore(), … }
46 / 76
JavaScript Tome-III
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
• 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 :
47 / 76
JavaScript Tome-III
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 :
48 / 76
JavaScript Tome-III
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 ,
49 / 76
JavaScript Tome-III
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 :
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.
50 / 76
JavaScript Tome-III
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
51 / 76
JavaScript Tome-III
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: ƒ}
__proto__:Object
Avec FIREfOX :
mouseup { target: body, buttons: 0, clientX: 42, clientY:
20, layerX: 42, layerY: 20 }
52 / 76
JavaScript Tome-III
==========
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
53 / 76
JavaScript Tome-III
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
Contenu de l’objet « Event keyup » de la souris :
console.log(event);
}
</script>
</head>
54 / 76
JavaScript Tome-III
<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 :
55 / 76
JavaScript Tome-III
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
56 / 76
JavaScript Tome-III
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
57 / 76
JavaScript Tome-III
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
58 / 76
JavaScript Tome-III
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
59 / 76
JavaScript Tome-III
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
60 / 76
JavaScript Tome-III
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
61 / 76
JavaScript Tome-III
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
62 / 76
JavaScript Tome-III
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
63 / 76
JavaScript Tome-III
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
64 / 76
JavaScript Tome-III
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
65 / 76
JavaScript Tome-III
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
type * keyup
eventPhase * 2
bubbles * true
cancelable * true
composed * true
timeStamp * 38355.750550160956
NONE * 0
66 / 76
JavaScript Tome-III
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
DOMMouseScroll...
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
67 / 76
JavaScript Tome-III
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
68 / 76
JavaScript Tome-III
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');
69 / 76
JavaScript Tome-III
//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";
70 / 76
JavaScript Tome-III
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>
document.addEventListener(
"contextmenu", d_cMenu, false);
function d_cMenu(e) {
e.preventDefault();
}
71 / 76
JavaScript Tome-III
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) :
72 / 76
JavaScript Tome-III
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,event-listener,écoute
d’événement,écouteur d'événement,event-handler,gestionnaire
d’événement,langage événementiel,programmation événémentielle,addEventListener,eventHandler,removeEventListener,DOM
jeudi, 4. avril 2019 (10:47 ).
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
73 / 76
JavaScript Tome-III
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
[email protected]
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-GrandSecret-de-La-Creation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-DosageDes-Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-HasardDes-Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/PetiteIntroduction-Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-enJesus-Christ-Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuitevisuelle-angulaire
• https://www.scribd.com/document/375349851/Lavariable-This
• https://www.scribd.com/document/375024162/FonctionsImbriquees-en-JS
• https://www.scribd.com/document/374789297/FormatLes Événemets (Events)
74 / 76
JavaScript Tome-III
Interne-Des-Objets-JavaScript
• https://www.scribd.com/document/374788758/Iterationsen-JavaScript
• https://www.scribd.com/document/374738470/Le-PlusGrand-Secret-de-La-Creation
• https://www.scribd.com/document/374597969/NouvelleFormule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/PropertyDescriptors
• https://www.scribd.com/document/373833282/l-ObjetGlobal-Window
• https://www.scribd.com/document/372665249/JavascriptTome-II
• https://www.scribd.com/document/355291488/motiliteoculaire-2
• https://www.scribd.com/document/355291239/motiliteoculaire-I
• https://www.scribd.com/document/355290248/Script-dAnalyses-Des-Reflexes-Pupillomoteurs
•
https://www.scribd.com/document/321168468/Renseignem
ents-Id-et-Anthropometriques
• https://www.scribd.com/document/320856721/Emission31-Jul-2016
•
https://www.scribd.com/document/318182982/Complication
-Visuelle-du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/RapportEntre-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
75 / 76
JavaScript Tome-III
• https://www.scribd.com/document/315745725/RapportEntre-Oxymetrie-Et-Type-Respiration
76 / 76

javascript tome viii - Events

Transcription

Documents pareils

Fiche de présentation AGIR à dom. Assistance

GRILLE TARIFAIRE 2015 Carte de Police Municipale

20-carte-commerciale..

Bordeaux, le 17 décembre 2009

Technico commercial export ou DOM COM h/f

Formations effectuées en métropole ou dans un autre DOM

la berline evenement

OFFRE DE STAGE

UN NOUVEAU REGARD SUR LA CHAUSSURE UN OUTIL DE

Offre de stage en marketing pour une entreprise de service à domicile