Where are Javascript event handlers stored?

Question

I'm trying to figure out how the DOM keeps track of event handlers, whether bound by using jQuery, addEventListener, or by HTML attribute (e.g. onload="myFunc()").

I've read that jQuery uses the .data() way to store event handlers bound by jQuery... but what about the others? Where do they go? I know that Webkit's inspector tool shows the Event Listeners by inspecting an element in the Elements tab, but where is it getting that information?

Incidentally, in some testing using Chrome's web inspector, I used the console to replace a version of jQuery on a live site with a newer one by pulling in the <script> tag, thus overriding the jQuery and $ variables. Obviously, events bound using jQuery before the replacement were lost, because a new .data() interface was introduced in the process.

Those handlers which are "lost," however, are still bound to certain events because they actually end up being called when the event fires. Suppose I want to remove those entirely, or supersede them with my own handlers? This is why I'd like to know how to access the actual handlers wherever the DOM is keeping them... and without jQuery.

As far as I know, they are bound to the DOM elements themselves, which are stored in the global window variable. — JCOC611
@JCOC611: DOM elements just exist in memory. window has some references to elements, but they are not "stored in window". — Felix Kling
@benqus: Unless they've recently changed it, jQuery's .data() actually has nothing to do with the HTML5 element.dataset. jQuery's is entirely a separate collection of data stored at jQuery.cache. It's linked by a serial number jQuery stores in an expando property directly on the element. — I Hate Lazy

I Hate Lazy I Hate Lazy · Accepted Answer · 2012-10-05T22:54:30

Regarding methods like addEventListener, they're not directly visible in regular JavaScript code. They're stored internally.

Regarding inline handlers, they're simply stored directly on the DOM Element, like a typical handler, so that this:

<a href="#" onclick='alert("foo");'>click</a>

effectively becomes this:

a_element.onclick = function(event) { alert("foo"); };

(Older IE doesn't include the event parameter in the function.)

Regarding jQuery, you're right that they're stored in .data(), or more accurately jQuery.cache.

But your handlers are never directly assigned to the element. jQuery assigns a single generic handler (using addEventListener or attachEvent, whatever's available) that you never see. When an event occurs, it looks at event.type, then looks up the element's .data() to see if there are handlers for that type, and if so, invokes them.

So if you have some script that is overwriting jQuery.cache, you've effectively orphaned those handlers. You can't remove a handler bound with addEventListener unless you have a reference to that handler. Since jQuery's generic handler was also stored in jQuery.cache, there's no way to unbind it unless you destroy the element itself.

I don't remember specifically if the generic handler has a reference to jQuery.cache or just a subset of it. The reference it does hold would have an impact on just how much leaky data there may be.

Where are Javascript event handlers stored?

1 Answers