Loading...

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.
  • GlobalEventHandlers.onload
    • The load event triggers when the an item has finished loading. This could be an <img>, window, XMLHttpRequest and more.
  • GlobalEventHandlers.onprogress
    • During an XMLHttpRequest, the progress event is generated periodically when the request receives more data.
  • GlobalEventHandlers.onloadend
    • When a request has loaded, or even if failed after and abort  or and error , the loadend event is generated.
  • 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.
  • 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.

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.
  • GlobalEventHandlers.onanimationcancel
    • A CSS animation has been canceled.

   Transitions

  • GlobalEventHandlers.ontransitionstart
    • A transitionstart event is sent when a CSS transition has begun transitioning.
  • 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. 
  • GlobalEventHandlers.ontransitionend
    • When a CSS transition has finished running, a transitionend event is triggered.
  • GlobalEventHandlers.ontransitioncancel
    • A transitioncancel event is is produced by a  CSS transition being cancelled.

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.
  • GlobalEventHandlers.onblur
    • The element or window has become deselected losing focus and prompting the blur event.
  • 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.
  • GlobalEventHandlers.onresize
    • A resize event occurs anytime the window is resized.
  • GlobalEventHandlers.onscroll
    • When the view of the document moves, a scroll event will be generated.

Clicks

  • GlobalEventHandlers.onauxclick
    • A middle-mouse button or similar non-primary button has been pressed on an input device sending an auxclick event.
  • GlobalEventHandlers.onchange
      • When an element or the document changes, the change event triggered.
  • GlobalEventHandlers.onclick
    • When an element registers a click, a click event is raised.
  • GlobalEventHandlers.oncontextmenu
    • When the right-button of the mouse is clicked, generally a context menu is shown. This triggers a contexmenu event.
  • GlobalEventHandlers.ondblclick
    • Clicking the mouse button twice quickly raises a dblclick event is raised.
  • GlobalEventHandlers.onmousedown
    • A mousedown event is sent when a pointing device is over the specified element and the devices button is pressed.
  • GlobalEventHandlers.onmouseup
    • Like above, but the mouseup event occurs when the button is released.
  • GlobalEventHandlers.onwheel
    • Rotating the mouse wheel will bring about a wheel event. Note, this is, technically, different from a scroll event, as the [km]wheel[/kw] event deals specifically and only with the wheel rotation.
  • GlobalEventHandlers.onpointerdown
    • The pointerdown event is sent when the pointing device's button is initially pressed.
  • GlobalEventHandlers.onpointerup
    • Like above, except the button is released and the pointerup event is generated.

Drag & Drop

  • GlobalEventHandlers.ondragstart
    • The dragstart event is sent when an element begins to be dragged.
  • GlobalEventHandlers.ondrag
    • The drag event is raised rapid-fire, every few milliseconds, while an element or text section is being dragged.
  • GlobalEventHandlers.ondragend
    • When an element stops being dragged, the dragend event is raised.
  • GlobalEventHandlers.ondragenter
    • When an element being dragged enters an area where it can be dropped, the dragenter event is is sent.
  • GlobalEventHandlers.ondrop
    • When an item being dragged is placed in a drop are, the drop event is triggered.
  • 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.
  • GlobalEventHandlers.ondragleave
    • When an element being dragged leaves an area where it can be dropped, the dragexit event is is sent.
  • GlobalEventHandlers.ondragover
    • Every few hundred milliseconds a dragover event is raised during the time an element being dragged is over a drop area.

Pointer

  • GlobalEventHandlers.ongotpointercapture
    • If setPointerCapture() is used, the gotpointercapture event type is raised when the pointer is captured.
  • GlobalEventHandlers.onlostpointercapture
    • During a pointer capture, when the pointer is then released a lostpointercapture event is produced.

Typing

  • GlobalEventHandlers.onkeydown
    • When a key is pressed down, the keydown event is triggered.
  • GlobalEventHandlers.onkeyup
    • When a key is pressed down, the keyup event is triggered.

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.
  • GlobalEventHandlers.onmouseleave
    • Like above, only when the mouse leaves the element's space it will trigger a mouseleave event.
  • GlobalEventHandlers.onmousemove
    • Whenever the mouse is moved the mousemove event is raised..
  • GlobalEventHandlers.onmouseover
    • The mouseover event is sent when the mouse enters an element's space.
  • GlobalEventHandlers.onmouseout
    • Like above, but the mouseout event is sent when the mouse leave the element's space.
  • GlobalEventHandlers.onpointermove
    • When the pointer changes location, and has not been canceled by a browser touch-action, the pointermove event is is produced.
  • 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 a pointercancel event.
  • GlobalEventHandlers.onpointerover
    • If the pointer reaches an elements  boundaries, a pointerover event is sent.
  • 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..
  • 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 the pointerdown event pops up, the pointerenter event will be triggered. .
  • GlobalEventHandlers.onpointerleave
    • When the pointer exits the boundaries of an element, the pointerleave event occurs.
  • GlobalEventHandlers.onpointerlockchange
    • If a pointer is locked or unlocked, this will bring about the pointerlockchange event.
  • GlobalEventHandlers.onpointerlockerror
    • The pointerlockerror event is sent if there is an attempt to lock or unlock a pointer that failed.

    Select

    • GlobalEventHandlers.onselect
      • IThe select is produced once the user selects text.
    • GlobalEventHandlers.onselectstart
      • Like the above, except  the selectstart event is triggered right when the user starts to make a new text selection.
    • 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.

    Touch

    • GlobalEventHandlers.ontouchcancel
      • A user incorrectly attempting a touch, like using too many fingers, will prompt a touchcancel event.
    • GlobalEventHandlers.ontouchend
      • Regardless of the number of fingers (touch points) the user uses, touchend event will occur when one finger is lifted.
    • GlobalEventHandlers.ontouchmove -Experimental
      •  When the touch point moves across the surface of the device, the touchmove event is produced
    • GlobalEventHandlers.ontouchstart -Experimental
      • The touchstart event is generated as soon as the first finger or stylus is placed on the screen.

    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.
    • 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.
    • GlobalEventHandlers.oncuechange
      • When the TextTrack (that runs with presentations) has a cue change the cuechange event is sent.
    • GlobalEventHandlers.ondurationchange
      • When the duration of a media element, liek a video, has changed, the durationchange event is sent.
    • 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.
    • GlobalEventHandlers.onended
      • The ended event is occurs when media has no data available and stops.
    • GlobalEventHandlers.onloadeddata
      • When the first frame of the media has finished loading the loadeddata event is triggered.
    • GlobalEventHandlers.onloadedmetadata
      • As it sounds, when the media's metadata has finished loading, the loadedmetadata event is sent.
    • GlobalEventHandlers.onpause
      • The pause event is generated when the media playback has been paused.
    • GlobalEventHandlers.onplay
      • When media playback is initiated, the  play event is produced.
    • 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.
    • GlobalEventHandlers.onratechange
      • The ratechange event is brought about when there is a change to the media playback rate.
    • GlobalEventHandlers.onseeked
      • After the seeking operation the media will again be ready to be played again bringing about the seeked event.
    • GlobalEventHandlers.onseeking
      • The seeking event occurs when the seeking operation is initiated.
    • GlobalEventHandlers.onstalled
      • When media is being fetched, the stalled event occurs when that data is expectantly no longer coming in.
    • GlobalEventHandlers.onsuspend
      • The suspend event is occurs when media data being retrieved has been suspended.
    • GlobalEventHandlers.ontimeupdate
      • The timeupdate is generated when the medias currentTime has has changed.
    • GlobalEventHandlers.onvolumechange
      • As it sounds, anytime the volume has changed the volumechange event is is triggered.
    • GlobalEventHandlers.onwaiting
      • If there is a temporary lack of data causing media playback to stop, a waiting event is produced.

    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.
    • 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.
    • GlobalEventHandlers.onreset
      • If a reset input is selected, like on <input type="reset">, the reset event is triggered.
    • GlobalEventHandlers.onsubmit
      • Submitting  a <form> will produce a submit event.

    One Reply to “Global Event Handlers”

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    q
    ↑ Back to Top