DOM Events in JavaScript

Mozilla Firefox 7 introduced CSS' useful text-overflow: ellipsis, an outstanding method of dynamically and elegantly concatenating strings within their parent elements. Firefox was late to the text-overflow party, so the Dojo Toolkit offered dojox.ellipsis, a resource that would shim ellipsis functionality with an iFrame. When perusing the dojox.ellipsis code, I found that the creators used the DOMSubtreeModified event to recheck all nodes when the page structure changes. After a bit of research, I found a whole host of DOM events you can use to spy on the document.

The DOM Tree Events

Here are the DOM tree events you can listen for:

Table provided by MDN documentation.

The DOM event you'll probably recognize is DOMContentLoaded, which is used to signal the domready we're all used to seeing within our JavaScript toolkits. The event names are all fairly self-explanatory. Adding these events is as easy as adding any other type of event:

// Notify us when any node within the document is modified, added removed, etc.
document.addEventListener("DOMSubtreeModified", function(e) {
	// Notify of change!
	console.warn("change!", e);
}, false);

// Now create a new element to see what it will look like
var a = document.createElement("a");
document.body.appendChild(a);

/*
	Result:

	{
		ADDITION: 2,
		MODIFICATION: 1,
		REMOVAL: 3,
		attrChange: 0,
		attrName: "", 
		defaultPrevented: false,
		newValue: "",
		prevValue: "",
		relatedNode: null,
		initMutationEvent: initMutationEvent(),
		bubbles: true,
		cancelable: false,
		constructor: MutationEvent { MODIFICATION=1, ADDITION=2, REMOVAL=3},
		currentTarget: Document en,
		eventPhase: 3,
		explicitOriginalTarget: body.home,
		isTrusted: true,
		originalTarget: body.home,
		target: body.home,
		timeStamp: 0,
		type: "DOMSubtreeModified"
	}

*/

What if you want to listen to simple node changes?

// Listen to when an image src or alt gets changed (ex: slideshow, etc.)
document.getElementById("slideshowImage").addEventListener("DOMAttrModified", function(e) {
	// Record the occurrence
	console.warn(e.attrName + " changed from ", e.prevValue," to: ", e.newValue);
}, false);

The attrName, prevValue, and newValue values tell you which attribute changed and its previoius and current values. Each event type has its own custom event properties so experiment with events when creating them. You can also learn the event properties by checking out the spec list.

These DOM events are really nice to plug into if you're looking for complete control over Document. The one caution to throw to you is that since these events can fire so often, attaching to them can be heavy on your app. The ability to attach to them when needed is incredibly useful in a sophisticated web application.