First of all, here is a list of event types that are defined by the W3C standards. (This list is based on the onevent attributes defined in the HTML5 standard. I assume that there are dozens of other event types, but this list is long enough as it is.)
Now, is it possible to define a global event handler that is called when any event originally occurs on any element on the page? (In this case, I don't want to count those events that occurred on elements because they bubbled up from a descendant element - that's why I wrote "originally occurs".)
If that is not possible, is it at least possible to define an event handler that is called when any event bubbles up to the root of the DOM tree (which is either the document
object or the window
object - both should work)? (I know that it's possible to stop bubbling programmatically, but I would use this event handler on a page that has no other handlers defined on any other elements.) (Also, I believe some events don't bubble up, but let's ignore these cases for the sake of this argument.)
I know that I can do this (using jQuery):
$(document).bind('abort afterprint beforeprint beforeunload etc.', function() { // handle event });
but that would be a rather undesirable solution for me.
btw I don't need a cross-browser solution. If it works in just one browser, I'm fine.
Also, Firebug is able to log events, but I would like to be able to catch the event programmatically (via JavaScript) rather then having them simply logged in the console.
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
User Interface events These occur as the result of any interaction with the browser window rather than the HTML page. In these events, we attach the event listener to the window object, not the document object.
/* function getAllEventTypes(){ if(location.href !='https://developer.mozilla.org/en-US/docs/Web/Events') return; var types = {}; $('.standard-table:eq(0) tr').find('td:eq(1)').map(function(){ var type = $.trim(this.innerText) || 'OtherEvent'; types[type] = types[type] || []; var event = $.trim(this.previousElementSibling.innerText); if(event) types[type].push(event); }); for(var t in types) types[t] = types[t].join(' '); return "var DOMEvents = "+JSON.stringify(types, null, 4).replace(/"(\w+)\":/ig, '$1:'); } */ var DOMEvents = { UIEvent: "abort DOMActivate error load resize scroll select unload", ProgressEvent: "abort error load loadend loadstart progress progress timeout", Event: "abort afterprint beforeprint cached canplay canplaythrough change chargingchange chargingtimechange checking close dischargingtimechange DOMContentLoaded downloading durationchange emptied ended ended error error error error fullscreenchange fullscreenerror input invalid languagechange levelchange loadeddata loadedmetadata noupdate obsolete offline online open open orientationchange pause pointerlockchange pointerlockerror play playing ratechange readystatechange reset seeked seeking stalled submit success suspend timeupdate updateready visibilitychange volumechange waiting", AnimationEvent: "animationend animationiteration animationstart", AudioProcessingEvent: "audioprocess", BeforeUnloadEvent: "beforeunload", TimeEvent: "beginEvent endEvent repeatEvent", OtherEvent: "blocked complete upgradeneeded versionchange", FocusEvent: "blur DOMFocusIn Unimplemented DOMFocusOut Unimplemented focus focusin focusout", MouseEvent: "click contextmenu dblclick mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup show", SensorEvent: "compassneedscalibration Unimplemented userproximity", OfflineAudioCompletionEvent: "complete", CompositionEvent: "compositionend compositionstart compositionupdate", ClipboardEvent: "copy cut paste", DeviceLightEvent: "devicelight", DeviceMotionEvent: "devicemotion", DeviceOrientationEvent: "deviceorientation", DeviceProximityEvent: "deviceproximity", MutationNameEvent: "DOMAttributeNameChanged DOMElementNameChanged", MutationEvent: "DOMAttrModified DOMCharacterDataModified DOMNodeInserted DOMNodeInsertedIntoDocument DOMNodeRemoved DOMNodeRemovedFromDocument DOMSubtreeModified", DragEvent: "drag dragend dragenter dragleave dragover dragstart drop", GamepadEvent: "gamepadconnected gamepaddisconnected", HashChangeEvent: "hashchange", KeyboardEvent: "keydown keypress keyup", MessageEvent: "message message message message", PageTransitionEvent: "pagehide pageshow", PopStateEvent: "popstate", StorageEvent: "storage", SVGEvent: "SVGAbort SVGError SVGLoad SVGResize SVGScroll SVGUnload", SVGZoomEvent: "SVGZoom", TouchEvent: "touchcancel touchend touchenter touchleave touchmove touchstart", TransitionEvent: "transitionend", WheelEvent: "wheel" } var RecentlyLoggedDOMEventTypes = {}; for(DOMEvent in DOMEvents){ var DOMEventTypes = DOMEvents[DOMEvent].split(' '); DOMEventTypes.filter(function(DOMEventType){ var DOMEventCategory = DOMEvent + ' '+DOMEventType; document.addEventListener(DOMEventType, function(e){ if(RecentlyLoggedDOMEventTypes[DOMEventCategory]) return; RecentlyLoggedDOMEventTypes[DOMEventCategory] = true; setTimeout(function(){ RecentlyLoggedDOMEventTypes[DOMEventCategory] = false }, 5000); var isActive = e.target==document.activeElement; if(isActive) { console.info(DOMEventCategory, ' target=', e.target, ' active=', document.activeElement, ' isActive=', true ); } else { console.log(DOMEventCategory, ' target=', e.target, ' active=', document.activeElement, ' isActive=', false ); } }, true); }); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With