scagood/domMonitor.js

## domMonitor.js
const domMonitor = function (tagname, eventname, options) {
    tagname = tagname.trim().toLowerCase();
    eventname = eventname.trim();
    options = options || {};

    const property = options.property || 'outline-color';
    const propertyFrom = options.property || '#fff';
    const propertyTo = options.property || '#000';

    const evn = new Event(eventname, {
        bubbles: true
    });

    function randomString(length) {
        let a;
        let text = '';

        for (a = 0; a < (length || 8); a++)
            text += (
                'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +
                'abcdefghijklmnopqrstuvwxyz' +
                '0123456789'
            )[~~(62 * Math.random())];

        return text;
    }

    function fire(elem) {
        elem.dispatchEvent(evn);
    }

    // Use Mutation Observers if possible
    if (typeof MutationObserver !== undefined) {
        window.addEventListener('load', () => {
            const observer = new MutationObserver(list =>
                list.forEach(mutation =>
                    mutation.addedNodes
                    .forEach(node => {
                        if (node.tagName.toLowerCase() === tagname)
                            fire(node);
                    })
                )
            );

            observer.observe(document.body, {childList: true});
        });
    }

    // Fall back on animation events
    else {
        const head = document.head;
        const style = document.createElement("style");
        const animationName = randomString(16);

        style.innerHTML = '' +
        '@keyframes ' + animationName + '{' +
        'from {' + property + ':' + propertyFrom + '}' +
        'to {' + property + ':' + propertyTo + '}}' +
        tagname + '{animation-duration: 0.01s;animation-name: ' + animationName + ';}'

        head.appendChild(style)

        function listen (event) {
            if (event.animationName == animationName) {
                const thing =
                    event.src ||
                    event.target ||
                    event.srcElement ||
                    event.targetElement ||
                    (event.path || [])[0] ||
                    undefined;

                if (thing !== undefined)
                    fire (thing);
            }
        }


        window.addEventListener('load', () => {
            document.body.addEventListener("animationstart", listen, false);
            document.body.addEventListener("MSAnimationStart", listen, false);
            document.body.addEventListener("webkitAnimationStart", listen, false);
        });
    }
}

## example.html
<html>
    <head>
        <script src="domMonitor.js"></script>
        <script>
            // Watch for the creation of new iframes.
            domMonitor('iframe', 'OhHeyLookAnIFrame!');

            // Shout about the 'creation' in console!
            window.addEventListener('OhHeyLookAnIFrame!', console.log);

            // This can be element/node specific as well for example:
            // document.querySelector('#some css.selector')
            //    .addEventListener('OhHeyLookAnIFrame!', console.log);
        </script>
        <script>
            // Add an iframe to the body in 1 second.
            setTimeout(function () {
                var iframe = document.createElement("iframe");
                iframe.src = '/frame.html';

                document.body.appendChild(iframe);
            }, 1000)
        </script>
    </head>
    <body>
        <!--
        <div id='some'>
            <css class='selector'>
                <a> Create an iframe here :') </a>
            </css>
        </div>
        -->
    </body>
</html>
	const domMonitor = function (tagname, eventname, options) {
	tagname = tagname.trim().toLowerCase();
	eventname = eventname.trim();
	options = options \|\| {};

	const property = options.property \|\| 'outline-color';
	const propertyFrom = options.property \|\| '#fff';
	const propertyTo = options.property \|\| '#000';

	const evn = new Event(eventname, {
	bubbles: true
	});

	function randomString(length) {
	let a;
	let text = '';

	for (a = 0; a < (length \|\| 8); a++)
	text += (
	'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +
	'abcdefghijklmnopqrstuvwxyz' +
	'0123456789'
	)[~~(62 * Math.random())];

	return text;
	}

	function fire(elem) {
	elem.dispatchEvent(evn);
	}

	// Use Mutation Observers if possible
	if (typeof MutationObserver !== undefined) {
	window.addEventListener('load', () => {
	const observer = new MutationObserver(list =>
	list.forEach(mutation =>
	mutation.addedNodes
	.forEach(node => {
	if (node.tagName.toLowerCase() === tagname)
	fire(node);
	})
	)
	);

	observer.observe(document.body, {childList: true});
	});
	}

	// Fall back on animation events
	else {
	const head = document.head;
	const style = document.createElement("style");
	const animationName = randomString(16);

	style.innerHTML = '' +
	'@keyframes ' + animationName + '{' +
	'from {' + property + ':' + propertyFrom + '}' +
	'to {' + property + ':' + propertyTo + '}}' +
	tagname + '{animation-duration: 0.01s;animation-name: ' + animationName + ';}'

	head.appendChild(style)

	function listen (event) {
	if (event.animationName == animationName) {
	const thing =
	event.src \|\|
	event.target \|\|
	event.srcElement \|\|
	event.targetElement \|\|
	(event.path \|\| [])[0] \|\|
	undefined;

	if (thing !== undefined)
	fire (thing);
	}
	}


	window.addEventListener('load', () => {
	document.body.addEventListener("animationstart", listen, false);
	document.body.addEventListener("MSAnimationStart", listen, false);
	document.body.addEventListener("webkitAnimationStart", listen, false);
	});
	}
	}
	<html>
	<head>
	<script src="domMonitor.js"></script>
	<script>
	// Watch for the creation of new iframes.
	domMonitor('iframe', 'OhHeyLookAnIFrame!');

	// Shout about the 'creation' in console!
	window.addEventListener('OhHeyLookAnIFrame!', console.log);

	// This can be element/node specific as well for example:
	// document.querySelector('#some css.selector')
	// .addEventListener('OhHeyLookAnIFrame!', console.log);
	</script>
	<script>
	// Add an iframe to the body in 1 second.
	setTimeout(function () {
	var iframe = document.createElement("iframe");
	iframe.src = '/frame.html';

	document.body.appendChild(iframe);
	}, 1000)
	</script>
	</head>
	<body>
	<!--
	<div id='some'>
	<css class='selector'>
	<a> Create an iframe here :') </a>
	</css>
	</div>
	-->
	</body>
	</html>