One Object to Rule Them All!
OK, perhaps not "rule" them all, but certainly there is one object that makes it possible for near-total control of a web app. The Global Event Handlers Web API provides a globally-scoped object containing an assortment of event data from the document, Window or an HTML element. This can be user-interaction events, like clicking a button or moving to a different element, or programmatic changes, like a CSS animation that runs on page load. Notice of these events, as well as a large variety of important detail relative to the event, are all housed in the single GlobalEventHandlers object. Note: For JavaScript use of the this Web API, see Event Access in JavaScript.
This is a complete list of current properties for this object. Deprecated and obsolete properties have been removed. If there are any on here that have changed status since publishing this, please let me know.
Resource Events
- GlobalEventHandlers.onloadstart
- When a resource has begun to be loaded, the
loadstart event produced.
- When a resource has begun to be loaded, the
- GlobalEventHandlers.onload
- The
load event triggers when the an item has finished loading. This could be an <img>, window, XMLHttpRequest and more.
- The
- GlobalEventHandlers.onprogress
- During an XMLHttpRequest, the
progress event is generated periodically when the request receives more data.
- During an XMLHttpRequest, the
- GlobalEventHandlers.onloadend
- When a request has loaded, or even if failed after and
abort or anderror , theloadend event is generated.
- When a request has loaded, or even if failed after and
- GlobalEventHandlers.onabort
- This captures an event that cancels an action. The definition in the spec is a little murky, but, ultimately, when the page or
fetch or similar is cancelled.
- This captures an event that cancels an action. The definition in the spec is a little murky, but, ultimately, when the page or
- GlobalEventHandlers.onerror
- An
error event is produced when a JavaScript runtime error occurs or a resource failed to load error event is raised. Window.onerror() or a window.addEventHandler can be used.
- An
CSS Events
Animations
- GlobalEventHandlers.onanimationstart
- A CSS animation has started playing.
- GlobalEventHandlers.onanimationend
- A CSS animation has stopped playing.
- GlobalEventHandlers.onanimationiteration
- A CSS animation sequence has begun playing a new iteration triggering an
animationiteration event.
- A CSS animation sequence has begun playing a new iteration triggering an
- GlobalEventHandlers.onanimationcancel
- A CSS animation has been canceled.
Transitions
- GlobalEventHandlers.ontransitionstart
- A
transitionstart event is sent when a CSS transition has begun transitioning.
- A
- GlobalEventHandlers.ontransitionrun - Experimental
- When a CSS is first initiated, even though it might not have started yet, due to transition delay or something similar, the
transitionrun is generated.
- When a CSS is first initiated, even though it might not have started yet, due to transition delay or something similar, the
- GlobalEventHandlers.ontransitionend
- When a CSS transition has finished running, a
transitionend event is triggered.
- When a CSS transition has finished running, a
- GlobalEventHandlers.ontransitioncancel
- A
transitioncancel event is is produced by a CSS transition being cancelled.
- A
User Interaction Events
Interacting with window, document or a Dialog Box
- GlobalEventHandlers.onfocus
- An element or window has become selected and is the focus triggering the
focus event.
- An element or window has become selected and is the focus triggering the
- GlobalEventHandlers.onblur
- The element or window has become deselected losing focus and prompting the
blur event.
- The element or window has become deselected losing focus and prompting the
- GlobalEventHandlers.onclose
- When a user closes a dialog box, a close event is triggered.
- GlobalEventHandlers.oncancel
- The
cancel event is triggered when the user opts to cancel or dismiss dialog.
- The
- GlobalEventHandlers.onresize
- A
resize event occurs anytime thewindow is resized.
- A
- GlobalEventHandlers.onscroll
- When the view of the
document moves, ascroll event will be generated.
- When the view of the
Clicks
- GlobalEventHandlers.onauxclick
- A middle-mouse button or similar non-primary button has been pressed on an input device sending an
auxclick event.
- A middle-mouse button or similar non-primary button has been pressed on an input device sending an
- GlobalEventHandlers.onchange
- When an element or the document changes, the
change event triggered.
- When an element or the document changes, the
- GlobalEventHandlers.onclick
- When an element registers a click, a
click event is raised.
- When an element registers a click, a
- GlobalEventHandlers.oncontextmenu
- When the right-button of the mouse is clicked, generally a context menu is shown. This triggers a
contexmenu event.
- When the right-button of the mouse is clicked, generally a context menu is shown. This triggers a
- GlobalEventHandlers.ondblclick
- Clicking the mouse button twice quickly raises a
dblclick event is raised.
- Clicking the mouse button twice quickly raises a
- GlobalEventHandlers.onmousedown
- A
mousedown event is sent when a pointing device is over the specified element and the devices button is pressed.
- A
- GlobalEventHandlers.onmouseup
- Like above, but the
mouseup event occurs when the button is released.
- Like above, but the
- GlobalEventHandlers.onwheel
- Rotating the mouse wheel will bring about a
wheel event. Note, this is, technically, different from ascroll event, as the [km]wheel[/kw] event deals specifically and only with the wheel rotation.
- Rotating the mouse wheel will bring about a
- GlobalEventHandlers.onpointerdown
- The
pointerdown event is sent when the pointing device's button is initially pressed.
- The
- GlobalEventHandlers.onpointerup
- Like above, except the button is released and the
pointerup event is generated.
- Like above, except the button is released and the
Drag & Drop
- GlobalEventHandlers.ondragstart
- The
dragstart event is sent when an element begins to be dragged.
- The
- GlobalEventHandlers.ondrag
- The
drag event is raised rapid-fire, every few milliseconds, while an element or text section is being dragged.
- The
- GlobalEventHandlers.ondragend
- When an element stops being dragged, the
dragend event is raised.
- When an element stops being dragged, the
- GlobalEventHandlers.ondragenter
- When an element being dragged enters an area where it can be dropped, the
dragenter event is is sent.
- When an element being dragged enters an area where it can be dropped, the
- GlobalEventHandlers.ondrop
- When an item being dragged is placed in a drop are, the
drop event is triggered.
- When an item being dragged is placed in a drop are, the
- GlobalEventHandlers.ondragexit
- *This is specific to Gecko* When an element being dragged leaves an area where it can be dropped, the
dragexit event is is sent.
- *This is specific to Gecko* When an element being dragged leaves an area where it can be dropped, the
- GlobalEventHandlers.ondragleave
- When an element being dragged leaves an area where it can be dropped, the
dragexit event is is sent.
- When an element being dragged leaves an area where it can be dropped, the
- GlobalEventHandlers.ondragover
- Every few hundred milliseconds a
dragover event is raised during the time an element being dragged is over a drop area.
- Every few hundred milliseconds a
Pointer
- GlobalEventHandlers.ongotpointercapture
- If setPointerCapture() is used, the
gotpointercapture event type is raised when the pointer is captured.
- If setPointerCapture() is used, the
- GlobalEventHandlers.onlostpointercapture
- During a pointer capture, when the pointer is then released a
lostpointercapture event is produced.
- During a pointer capture, when the pointer is then released a
Typing
- GlobalEventHandlers.onkeydown
- When a key is pressed down, the
keydown event is triggered.
- When a key is pressed down, the
- GlobalEventHandlers.onkeyup
- When a key is pressed down, the
keyup event is triggered.
- When a key is pressed down, the
Pointer(Mouse) Movement
- GlobalEventHandlers.onmouseenter
- When a listener is attached to an element and the mouse enter the element's space, the
mouseenter event is produced.
- When a listener is attached to an element and the mouse enter the element's space, the
- GlobalEventHandlers.onmouseleave
- Like above, only when the mouse leaves the element's space it will trigger a
mouseleave event.
- Like above, only when the mouse leaves the element's space it will trigger a
- GlobalEventHandlers.onmousemove
- Whenever the mouse is moved the
mousemove event is raised..
- Whenever the mouse is moved the
- GlobalEventHandlers.onmouseover
- The
mouseover event is sent when the mouse enters an element's space.
- The
- GlobalEventHandlers.onmouseout
- Like above, but the
mouseout event is sent when the mouse leave the element's space.
- Like above, but the
- GlobalEventHandlers.onpointermove
- When the pointer changes location, and has not been canceled by a browser touch-action, the
pointermove event is is produced.
- When the pointer changes location, and has not been canceled by a browser touch-action, the
- GlobalEventHandlers.onpointercancel
- If the
pointerdown event is triggered, or the browser can assume there will be no more pointer movement like in the cases of scrolling or zooming, this will bring about apointercancel event.
- If the
- GlobalEventHandlers.onpointerover
- If the pointer reaches an elements boundaries, a
pointerover event is sent.
- If the pointer reaches an elements boundaries, a
- GlobalEventHandlers.onpointerout
- The
pointerout event can be triggered for a few reasons that can be viewed here, but, most useful to know, is that this will occur if the pointer leaves an element's boundries..
- The
- GlobalEventHandlers.onpointerenter
- The
pointerenter event will occur if the pointer enters an element's bounds or one of its descendants boundries. In addition, if a device does not support hover and thepointerdown event pops up, thepointerenter event will be triggered. .
- The
- GlobalEventHandlers.onpointerleave
- When the pointer exits the boundaries of an element, the
pointerleave event occurs.
- When the pointer exits the boundaries of an element, the
- GlobalEventHandlers.onpointerlockchange
- If a pointer is locked or unlocked, this will bring about the
pointerlockchange event.
- If a pointer is locked or unlocked, this will bring about the
- GlobalEventHandlers.onpointerlockerror
- The
pointerlockerror event is sent if there is an attempt to lock or unlock a pointer that failed.
- The
Select
- GlobalEventHandlers.onselect
- IThe
select is produced once the user selects text.
- IThe
- GlobalEventHandlers.onselectstart
- Like the above, except the
selectstart event is triggered right when the user starts to make a new text selection.
- Like the above, except the
- GlobalEventHandlers.onselectionchange
- As expected, this works like the above, with the difference being that the
selectionchange event is generated when the user changes their text selection.
- As expected, this works like the above, with the difference being that the
Touch
- GlobalEventHandlers.ontouchcancel
- A user incorrectly attempting a touch, like using too many fingers, will prompt a
touchcancel event.
- A user incorrectly attempting a touch, like using too many fingers, will prompt a
- GlobalEventHandlers.ontouchend
- Regardless of the number of fingers (touch points) the user uses,
touchend event will occur when one finger is lifted.
- Regardless of the number of fingers (touch points) the user uses,
- GlobalEventHandlers.ontouchmove -Experimental
- When the touch point moves across the surface of the device, the
touchmove event is produced
- When the touch point moves across the surface of the device, the
- GlobalEventHandlers.ontouchstart -Experimental
- The
touchstart event is generated as soon as the first finger or stylus is placed on the screen.
- The
Media Events
- GlobalEventHandlers.oncanplay
- The
canplay event is occurs when the browser can play the media, but thinks it will still need to use buffer data to make it all of the way to the end.
- The
- GlobalEventHandlers.oncanplaythrough
- If the browser thinks it can play the media all of the way to the end without further buffering, the
canplaythrough event is raised.
- If the browser thinks it can play the media all of the way to the end without further buffering, the
- GlobalEventHandlers.oncuechange
- When the
TextTrack (that runs with presentations) has a cue change thecuechange event is sent.
- When the
- GlobalEventHandlers.ondurationchange
- When the duration of a media element, liek a video, has changed, the
durationchange event is sent.
- When the duration of a media element, liek a video, has changed, the
- GlobalEventHandlers.onemptied
- If a media element is emptied, if, for example, it was loaded and ready, but then told to reload, the
emptied event is raised.
- If a media element is emptied, if, for example, it was loaded and ready, but then told to reload, the
- GlobalEventHandlers.onended
- The
ended event is occurs when media has no data available and stops.
- The
- GlobalEventHandlers.onloadeddata
- When the first frame of the media has finished loading the
loadeddata event is triggered.
- When the first frame of the media has finished loading the
- GlobalEventHandlers.onloadedmetadata
- As it sounds, when the media's metadata has finished loading, the
loadedmetadata event is sent.
- As it sounds, when the media's metadata has finished loading, the
- GlobalEventHandlers.onpause
- The
pause event is generated when the media playback has been paused.
- The
- GlobalEventHandlers.onplay
- When media playback is initiated, the
play event is produced.
- When media playback is initiated, the
- GlobalEventHandlers.onplaying
- If there is any delay, whether due to the user selecting pause or there is a lack of data to continue, once the media is again ready to be played the
playing event is triggered.
- If there is any delay, whether due to the user selecting pause or there is a lack of data to continue, once the media is again ready to be played the
- GlobalEventHandlers.onratechange
- The
ratechange event is brought about when there is a change to the media playback rate.
- The
- GlobalEventHandlers.onseeked
- After the seeking operation the media will again be ready to be played again bringing about the
seeked event.
- After the seeking operation the media will again be ready to be played again bringing about the
- GlobalEventHandlers.onseeking
- The
seeking event occurs when the seeking operation is initiated.
- The
- GlobalEventHandlers.onstalled
- When media is being fetched, the
stalled event occurs when that data is expectantly no longer coming in.
- When media is being fetched, the
- GlobalEventHandlers.onsuspend
- The
suspend event is occurs when media data being retrieved has been suspended.
- The
- GlobalEventHandlers.ontimeupdate
- The
timeupdate is generated when the mediascurrentTime has has changed.
- The
- GlobalEventHandlers.onvolumechange
- As it sounds, anytime the volume has changed the
volumechange event is is triggered.
- As it sounds, anytime the volume has changed the
- GlobalEventHandlers.onwaiting
- If there is a temporary lack of data causing media playback to stop, a
waiting event is produced.
- If there is a temporary lack of data causing media playback to stop, a
Form Events
- GlobalEventHandlers.onformdata
-
formdata events are fired when the form is submitted (which constructs the data) or the FormData() constructor is invoked.
-
- GlobalEventHandlers.oninput
- This holds data related to an
input event on the <input>, <select>, and <textarea> elements. In addition, elements where contenteditable or designMode are turned on are handled here, as well.
- This holds data related to an
- GlobalEventHandlers.oninvalid
- When a submittable element has been checked and doesn't meet a certain specification, an
invalid event is sent. This can also happen after the checkValidity()is called.
- When a submittable element has been checked and doesn't meet a certain specification, an
- GlobalEventHandlers.onreset
- If a reset input is selected, like on <input type="reset">, the
reset event is triggered.
- If a reset input is selected, like on <input type="reset">, the
- GlobalEventHandlers.onsubmit
- Submitting a <form> will produce a
submit event.
- Submitting a <form> will produce a
One Reply to “Global Event Handlers”