Purging Event Listeners for Internet Explorer

Element.clearAttributes()

If an Element is removed from the DOM tree without detaching all its event listeners, IE6 may not release its memory until the browser 's closed, which means that we have Memory Leak problem and Douglas Crockford's had some very good explanation and test cases for you to understand the issue.

One thing challenge is that it's hard to remove a closure as an Event handler since it's usually a anonymous function and not accessible from the Global scope, but for Internet Explorer 6, it seems like we can purge all the event handlers attached by attachEvent() method and release the memory.

For example, in order to purge event listeners for IE6 , you may do this .

<div id="foo">test</div> <script> var foo = document.getElementById('foo'); if( foo.attachEvent ){ foo.attachEvent( 'onmousedown' , function(){ foo.style.backgroundColor = 'red'; }); foo.attachEvent( 'onclick' , function(){ alert('clicked'); foo.clearAttributes(); //detach all event handler alert('event listeners are cleared'); }); }; </script>

In many cases, clearAttributes() may also clean up the attributes such as ID , inline styles or classNames you'd like to keep. To purge Event listeners without remove extra Attributes / Expandoes, you may tweak the JS like this

<div id="foo">test</div> <script> var foo = document.getElementById('foo'); if( foo.attachEvent ){ foo.attachEvent( 'onmousedown' , function(){ foo.style.backgroundColor = 'red'; }); foo.attachEvent( 'onclick' , function(){ foo.bar = 'this is expando'; alert('clicked' ); alert('foo.outerHTML = ' + foo.outerHTML ); var foo_copy = foo.cloneNode(false); foo.clearAttributes(false); //detach all event handler foo.mergeAttributes(foo_copy,false ); alert('event listeners are cleared'); alert('foo.outerHTML = ' + foo.outerHTML ); }); }; </script>

In this case, we use cloneNode() to save all attribues of the Element and then use mergeAttributes() to restore the attributes after calling clearAttributes().

clearAttributes() seems to be handy to me but I'm not sure whether it will apply to all IE6 since MicroSoft has released its Service Pack which tried to fix the Memory Leak issue and you might find somthing new based on different versions of IE6 but I'd say that in my IE6 clearAttributes does clean up the event handlers.

See also

Purging Event Listeners for Internet Explorer

Test Cases

Memory usage spikes

• Test Without memory leak (using clearAttributes())
• With memory leak

Example Javascript

// #1 create an Element // #2 attach event listener ( closure ) to the Element // #3 remove the element from DOM s.parentNode.removeChild(s);

---

To start the test, please click " Start Test " and open your Windows Task Manager to monitor the performance

---