shared events between window, document, and htmlelements

When it comes to coding, there’s always something new to learn. One of the areas I find I have a hard time with are

Take, for example, this list of GlobalEventHandlers compiled by MDN.

The GlobalEventHandlers mixin describes the event handlers common to several interfaces like HTMLElement, Document, or Window. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.

Notice: these are the common APIs between HTMLElement, Document, and Window. Yes, many are deprecated, experimental, not supported, or in some other way non-main stream. Yet, there are still dozens of interesting APIs here that I had no idea existed before.

Reading through this list is inspiring. I mean that quite literally in that I am inspired by the types of applications I can build that I had never really thought of before and so many new opportunities to hook into different parts of my application’s life cycle.

Time to experiment!

• GlobalEventHandlers.onabort Is an EventHandler representing the code to be called when the abort event is raised.
• GlobalEventHandlers.onanimationcancel An EventHandler called when an animationcancel event is sent, indicating that a running CSS animation has been canceled.
• GlobalEventHandlers.onanimationend An EventHandler called when an animationend event is sent, indicating that a CSS animation has stopped playing.
• GlobalEventHandlers.onanimationiteration An EventHandler called when an animationiteration event has been sent, indicating that a CSS animation has begun playing a new iteration of the animation sequence.
• GlobalEventHandlers.onanimationstart An EventHandler called when an animationstart event is sent, indicating that a CSS animation has started playing.
• GlobalEventHandlers.onauxclick An EventHandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).
• GlobalEventHandlers.onblur Is an EventHandler representing the code to be called when the blur event is raised.
• GlobalEventHandlers.onerror Is an OnErrorEventHandler representing the code to be called when the error event is raised.
• GlobalEventHandlers.onfocus Is an EventHandler representing the code to be called when the focus event is raised.
• GlobalEventHandlers.oncancel Is an EventHandler representing the code to be called when the cancel event is raised.
• GlobalEventHandlers.oncanplay Is an EventHandler representing the code to be called when the canplay event is raised.
• GlobalEventHandlers.oncanplaythrough Is an EventHandler representing the code to be called when the canplaythrough event is raised.
• GlobalEventHandlers.onchange Is an EventHandler representing the code to be called when the change event is raised.
• GlobalEventHandlers.onclick Is an EventHandler representing the code to be called when the click event is raised.
• GlobalEventHandlers.onclose Is an EventHandler representing the code to be called when the close event is raised.
• GlobalEventHandlers.oncontextmenu Is an EventHandler representing the code to be called when the contextmenu event is raised.
• GlobalEventHandlers.oncuechange Is an EventHandler representing the code to be called when the cuechange event is raised.
• GlobalEventHandlers.ondblclick Is an EventHandler representing the code to be called when the dblclick event is raised.
• GlobalEventHandlers.ondrag Is an EventHandler representing the code to be called when the drag event is raised.
• GlobalEventHandlers.ondragend Is an EventHandler representing the code to be called when the dragend event is raised.
• GlobalEventHandlers.ondragenter Is an EventHandler representing the code to be called when the dragenter event is raised.
• GlobalEventHandlers.ondragexit Is an EventHandler representing the code to be called when the dragexit event is raised.
• GlobalEventHandlers.ondragleave Is an EventHandler representing the code to be called when the dragleave event is raised.
• GlobalEventHandlers.ondragover Is an EventHandler representing the code to be called when the dragover event is raised.
• GlobalEventHandlers.ondragstart Is an EventHandler representing the code to be called when the dragstart event is raised.
• GlobalEventHandlers.ondrop Is an EventHandler representing the code to be called when the drop event is raised.
• GlobalEventHandlers.ondurationchange Is an EventHandler representing the code to be called when the durationchange event is raised.
• GlobalEventHandlers.onemptied Is an EventHandler representing the code to be called when the emptied event is raised.
• GlobalEventHandlers.onended Is an EventHandler representing the code to be called when the ended event is raised.
• GlobalEventHandlers.onformdata Is an EventHandler for processing formdata events, fired after the entry list representing the form’s data is constructed.
• GlobalEventHandlers.ongotpointercapture Is an EventHandler representing the code to be called when the gotpointercapture event type is raised.
• GlobalEventHandlers.oninput Is an EventHandler representing the code to be called when the input event is raised.
• GlobalEventHandlers.oninvalid Is an EventHandler representing the code to be called when the invalid event is raised.
• GlobalEventHandlers.onkeydown Is an EventHandler representing the code to be called when the keydown event is raised.
• GlobalEventHandlers.onkeypress Is an EventHandler representing the code to be called when the keypress event is raised.
• GlobalEventHandlers.onkeyup Is an EventHandler representing the code to be called when the keyup event is raised.
• GlobalEventHandlers.onload Is an EventHandler representing the code to be called when the load event is raised.
• GlobalEventHandlers.onloadeddata Is an EventHandler representing the code to be called when the loadeddata event is raised.
• GlobalEventHandlers.onloadedmetadata Is an EventHandler representing the code to be called when the loadedmetadata event is raised.
• GlobalEventHandlers.onloadend Is an EventHandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.)
• GlobalEventHandlers.onloadstart Is an EventHandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.)
• GlobalEventHandlers.onlostpointercapture Is an EventHandler representing the code to be called when the lostpointercapture event type is raised.
• GlobalEventHandlers.onmousedown Is an EventHandler representing the code to be called when the mousedown event is raised.
• GlobalEventHandlers.onmouseenter Is an EventHandler representing the code to be called when the mouseenter event is raised.
• GlobalEventHandlers.onmouseleave Is an EventHandler representing the code to be called when the mouseleave event is raised.
• GlobalEventHandlers.onmousemove Is an EventHandler representing the code to be called when the mousemove event is raised.
• GlobalEventHandlers.onmouseout Is an EventHandler representing the code to be called when the mouseout event is raised.
• GlobalEventHandlers.onmouseover Is an EventHandler representing the code to be called when the mouseover event is raised.
• GlobalEventHandlers.onmouseup Is an EventHandler representing the code to be called when the mouseup event is raised.
• GlobalEventHandlers.onmousewheel Is an EventHandler representing the code to be called when the mousewheel event is raised. Deprecated. Use onwheel instead.
• GlobalEventHandlers.onwheel Is an EventHandler representing the code to be called when the wheel event is raised.
• GlobalEventHandlers.onpause Is an EventHandler representing the code to be called when the pause event is raised.
• GlobalEventHandlers.onplay Is an EventHandler representing the code to be called when the play event is raised.
• GlobalEventHandlers.onplaying Is an EventHandler representing the code to be called when the playing event is raised.
• GlobalEventHandlers.onpointerdown Is an EventHandler representing the code to be called when the pointerdown event is raised.
• GlobalEventHandlers.onpointermove Is an EventHandler representing the code to be called when the pointermove event is raised.
• GlobalEventHandlers.onpointerup Is an EventHandler representing the code to be called when the pointerup event is raised.
• GlobalEventHandlers.onpointercancel Is an EventHandler representing the code to be called when the pointercancel event is raised.
• GlobalEventHandlers.onpointerover Is an EventHandler representing the code to be called when the pointerover event is raised.
• GlobalEventHandlers.onpointerout Is an EventHandler representing the code to be called when the pointerout event is raised.
• GlobalEventHandlers.onpointerenter Is an EventHandler representing the code to be called when the pointerenter event is raised.
• GlobalEventHandlers.onpointerleave Is an EventHandler representing the code to be called when the pointerleave event is raised.
• GlobalEventHandlers.onpointerlockchange Is an EventHandler representing the code to be called when the pointerlockchange event is raised.
• GlobalEventHandlers.onpointerlockerror Is an EventHandler representing the code to be called when the pointerlockerror event is raised.
• GlobalEventHandlers.onprogress Is an EventHandler representing the code to be called when the progress event is raised.
• GlobalEventHandlers.onratechange Is an EventHandler representing the code to be called when the ratechange event is raised.
• GlobalEventHandlers.onreset Is an EventHandler representing the code to be called when the reset event is raised.
• GlobalEventHandlers.onresize Is an EventHandler representing the code to be called when the resize event is raised.
• GlobalEventHandlers.onscroll Is an EventHandler representing the code to be called when the scroll event is raised.
• GlobalEventHandlers.onseeked Is an EventHandler representing the code to be called when the seeked event is raised.
• GlobalEventHandlers.onseeking Is an EventHandler representing the code to be called when the seeking event is raised.
• GlobalEventHandlers.onselect Is an EventHandler representing the code to be called when the select event is raised.
• GlobalEventHandlers.onselectstart Is an EventHandler representing the code to be called when the selectionchange event is raised, i.e. when the user starts to make a new text selection on a web page.
• GlobalEventHandlers.onselectionchange Is an EventHandler representing the code to be called when the selectionchange event is raised, i.e. when the text selected on a web page changes.
• GlobalEventHandlers.onshow Is an EventHandler representing the code to be called when the show event is raised.
• GlobalEventHandlers.onsort Is an EventHandler representing the code to be called when the sort event is raised.
• GlobalEventHandlers.onstalled Is an EventHandler representing the code to be called when the stalled event is raised.
• GlobalEventHandlers.onsubmit Is an EventHandler representing the code to be called when the submit event is raised.
• GlobalEventHandlers.onsuspend Is an EventHandler representing the code to be called when the suspend event is raised.
• GlobalEventHandlers.ontimeupdate Is an EventHandler representing the code to be called when the timeupdate event is raised.
• GlobalEventHandlers.onvolumechange Is an EventHandler representing the code to be called when the volumechange event is raised.
• GlobalEventHandlers.ontouchcancel Is an EventHandler representing the code to be called when the touchcancel event is raised.
• GlobalEventHandlers.ontouchend Is an EventHandler representing the code to be called when the touchend event is raised.
• GlobalEventHandlers.ontouchmove Is an EventHandler representing the code to be called when the touchmove event is raised.
• GlobalEventHandlers.ontouchstart Is an EventHandler representing the code to be called when the touchstart event is raised.
• GlobalEventHandlers.ontransitioncancel An EventHandler called when a transitioncancel event is sent, indicating that a CSS transition has been cancelled.
• GlobalEventHandlers.ontransitionend An EventHandler called when a transitionend event is sent, indicating that a CSS transition has finished playing.
• GlobalEventHandlers.ontransitionrun An EventHandler called when a transitionrun event is sent, indicating that a CSS transition is running, though not nessarilty started.
• GlobalEventHandlers.ontransitionstart An EventHandler called when a transitionstart event is sent, indicating that a CSS transition has started transitioning.
• GlobalEventHandlers.onwaiting Is an EventHandler representing the code to be called when the waiting event is raised.