Debugging: Focus: on focus and blur, log document.activeElement

Debugging: Focus: on focus and blur, log document.activeElement.js

/* Non-jQuery, ES6 version. This won't definitely work in older browsers */

/* Short ES6 version (for single-line copy/pasting) */
const everything = document.querySelectorAll('*'); function trackEvent(event) { event.stopPropagation(); var eventType = event.type, eventTarget = event.target, activeElement = document.activeElement; setTimeout(function() { console.group(eventType); console.log('event.target:'); console.log(eventTarget); console.log('document.activeElement (immediate):'); console.log(activeElement); console.log('document.activeElement (after cycle completion):'); console.log(document.activeElement); console.groupEnd(); }, 0); }; ['click', 'focus', 'blur'].forEach((eventType) => { everything.forEach((el) => el.addEventListener(eventType, trackEvent));});

/* Expanded ES6 version (for editing/understanding) */

const everything = document.querySelectorAll('*');

function trackEvent(event) {
	// Stop propagation. Without this, the events will bubble creating a mess of logs.
	event.stopPropagation();

	// Gather variables.
	var eventType = event.type,
		eventTarget = event.target,
		activeElement = document.activeElement;

	// `setTimeout` allows us to wait for completion of a cycle, enabling us to see what the resulting `document.activeElement` is.
	setTimeout(function() {
		// Log it. For the version for browsers that don't support `console.group`, we append the `event.type` to the first log. Otherwise, the snippets are identical.
		console.group(eventType);
		console.log('event.target:');
		console.log(eventTarget);
		console.log('document.activeElement (immediate):');
		console.log(activeElement);
		console.log('document.activeElement (after cycle completion):');
		console.log(document.activeElement);
		console.groupEnd();
	}, 0);
}

// Feel free to add more event types
['click', 'focus', 'blur'].forEach((eventType) => {
  everything.forEach((el) => el.addEventListener(eventType, trackEvent));
});




/* ========================================== */




/* jQuery Version */

/* Turning it on for browsers that support `console.group`: */
$('*').on('focus.focusLog blur.focusLog click.focusLog', function(event) {event.stopPropagation();var eventType = event.type, eventTarget = event.target, activeElement = document.activeElement; setTimeout(function() { console.group(eventType); console.log('event.target:'); console.log(eventTarget); console.log('document.activeElement (immediate):'); console.log(activeElement); console.log('document.activeElement (after cycle completion):'); console.log(document.activeElement); console.groupEnd(); }, 0); });

/* Turning it off */
$('*').off('focus.focusLog blur.focusLog click.focusLog');


/* Turning it on for browsers that don't support `console.group`: */
$('*').on('focus.focusLog blur.focusLog click.focusLog', function(event) {event.stopPropagation();var eventType = event.type, eventTarget = event.target, activeElement = document.activeElement; setTimeout(function() { console.log(eventType + 'event.target:'); console.log(eventTarget); console.log('document.activeElement (immediate):'); console.log(activeElement); console.log('document.activeElement (after cycle completion):'); console.log(document.activeElement); }, 0); });




/* Expanded version (for editing/understanding) */

// Feel free to add more event types
$('*').on('focus.focusLog blur.focusLog click.focusLog', function(event) {
	// Stop propagation. Without this, the events will bubble creating a mess of logs.
	event.stopPropagation();

	// Gather variables.
	var eventType = event.type,
		eventTarget = event.target,
		activeElement = document.activeElement;

	// `setTimeout` allows us to wait for completion of a cycle, enabling us to see what the resulting `document.activeElement` is.
	setTimeout(function() {
		// Log it. For the version for browsers that don't support `console.group`, we append the `event.type` to the first log. Otherwise, the snippets are identical.
		console.group(eventType);
		console.log('event.target:');
		console.log(eventTarget);
		console.log('document.activeElement (immediate):');
		console.log(activeElement);
		console.log('document.activeElement (after cycle completion):');
		console.log(document.activeElement);
		console.groupEnd();
	}, 0);
});