Event Cache is a small script which can store the events you have set on a page and remove them on unload. This way it can prevent memory leakage. Please read DHTML leaks like a sieve by Joel Webber for more information. Also, here’s a quote Jim Ley, who explains:

The Internet Explorer web browser [...] has a fault in its garbage collection system that prevents it from garbage collecting ECMAScript and some host objects if those host objects form part of a “circular” reference. The host objects in question are any DOM Nodes (including the document object and its descendants) and ActiveX objects. If a circular reference is formed including one or more of them, then none of the objects involved will be freed until the browser is closed down, and the memory that they consume will be unavailable to the system until that happens.

So, how can we solve this? If we make sure no references are left when the page unloads, there won’t be a problem. In the comments of Joel Webber’s article Dylan Schiemann mentioned that Alex Russell of NetWindows had written a solution for this problem. So I dived into the NetWindows code to look for it.

It turns out that what the NetWindows code does is caching all events set for the affected browsers and detaching the events on unload. Based on this principle I wrote EventCache.

Please also read the follow-up article.

Usage

The idea is that you hook EventCache into your normal event code. You simply add the information you need to set the event to the EventCache using the add method.

EventCache has the following properties and methods:

listEvents

An array whose items are arrays which contain the information in the following order: node, sEventName, fHandler, bCapture. See add for more information.

add(node, sEventName, fHandler, bCapture)

Add new information to listEvents.

node

A reference to the node on which the event has been set.

sEventName

The name of the event.

Please note: this name must not be prefixed with on for any browser but Internet Explorer. The actual event you use must be prefixed with on. For example, if your event is onclick, sEventName must be click. If you use a custom event you can’t use foo, but you have to use onfoo. Of course sEventName must be foo.

fHandler

A reference to the function which handles the event.

bCapture

A boolean which determines whether the event is triggered in capture mode or not. Does not apply to Internet Explorer.

flush()

Remove all cached events.

Please note: You have to make sure that EventCache.flush is fired on unload!

Examples

I’ve made two testcases. One with memory leaking, and one which uses Event Cache. You can also try the Event Cache testcase with feedback

As you can see these examples don’t use browser detection to see if cleaning the references is really necessary. That’s something for your own implementation.

Other Methods

There are some other ways to solve this problem. One would be to never keep references at all, but closures are too handy to do this. Another solution is to iterate over all elements in a document and remove specific events. This is the solution that Aaron Boodman proposed.

The downside with this method though is that it only works for events which use the so-called DOM 0 event model: element.onclick = function(){};. If you use element.attachEvent() or element.addEventListener() you need to remember the specific values you used to set the event, which means you have to cache it.

Considerations

The cache keeps references to the element on which you’ve set an event and the event handler. This means that it consumes memory itself. It also takes time to remove the events on unload.

Download and Licensing

EventCache is released under the CC-GNU LGPL. You can download version 1.0.

And Finally

If you have any questions about this article or the code, please contact me.