最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Where are Javascript event handlers stored? - Stack Overflow

programmeradmin0浏览0评论

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.

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.

Share Improve this question asked Oct 5, 2012 at 22:48 MattMatt 23.8k18 gold badges74 silver badges116 bronze badges 4
  • As far as I know, they are bound to the DOM elements themselves, which are stored in the global window variable. – JCOC611 Commented Oct 5, 2012 at 22:50
  • @JCOC611: DOM elements just exist in memory. window has some references to elements, but they are not "stored in window". – Felix Kling Commented Oct 5, 2012 at 22:52
  • @benqus: Not when addEventListener is used. – Felix Kling Commented Oct 5, 2012 at 22:54
  • @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 Commented Oct 5, 2012 at 22:55
Add a ment  | 

1 Answer 1

Reset to default 10

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 bees 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.

发布评论

评论列表(0)

  1. 暂无评论