afterscriptexecute Event

afterscriptexecuteEvent.txt

afterscriptexecute Event
Written by David Walsh on January 2, 2013 ·  4 Comments

Fellow Mozillian Daniel Buchner, curator of the X-Tag project and clever developer who showed us how to detect dom node insertions using CSS animations, recently showed me a new feature JavaScript feature I'd never heard of:  the SCRIPT element's afterscriptexecute event.  This event, when detected within the document, provides developers insight as to when specific SCRIPT elements are executed.

View Demo
The following snippet listens for script executions on the page and logs the specifc SCRIPT element to the console after executed:

<script id="my_script" type="text/javascript">
document.addEventListener('afterscriptexecute', function(e){
  console.log('Script executed: ', e.target);
}, false);
</script>

<script type="text/javascript">console.log('foo')</script>

<script type="text/javascript">console.log('bar')</script>

<!-- 
  Result:

	Script executed:  [object HTMLScriptElement]

	foo
	Script executed:  [object HTMLScriptElement]

	bar
	Script executed:  [object HTMLScriptElement]
-->
This technique will be incredibly useful for debugging complex JavaScript applications, allowing developers to know exactly which script had just been injected and executed.

View Demo
Daniel has a knack for finding useful new techniques and this tip will be helpful down the road.  Unfortunately only Firefox has implemented this event but I look forward to WebKit support soonish.  Can you think of how you'd use this event?