JavaScript事件处理程序在哪里存储？ [英] Where are Javascript event handlers stored?

问题描述

我想弄清楚DOM如何跟踪事件处理程序，无论是使用jQuery，addEventListener还是通过HTML属性（例如onload =myFunc（））。

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()").

我已经看到jQuery使用.data（）方式存储jQuery绑定的事件处理程序，但是其他的呢？他们去哪里？我知道Webkit的检查器工具通过检查元素选项卡中的一个元素来显示事件监听器，但是它在哪里获取该信息？

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?

顺便提一下，在使用Chrome的网络检查员，我使用控制台通过拉入< script> 标签在现场网站上替换一个新版本的jQuery，从而覆盖 jQuery 和 $ 变量。显然，在替换之前使用jQuery绑定的事件会丢失，因为在进程中引入了一个新的.data（）接口。

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.

那些丢失的处理程序，仍然受到某些事件的约束，因为事件触发时实际上最终被调用。假设我想完全删除它们，或者用我自己的处理程序替代它们？这就是为什么我想知道如何访问实际的处理程序，无论DOM保持他们...而没有jQuery。

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.

推荐答案

关于方法，如 addEventListener ，它们不会在常规JavaScript代码中直接显示。它们存储在内部。

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

对于内联处理程序，它们直接存储在DOM元素上，就像典型的处理程序，以便这样：

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>

有效成为：

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

（旧版IE不包括事件参数中的功能。）

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

关于jQuery，重新存储在 .data（）中，或更准确地 jQuery.cache 。

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

但是您的处理程序从不直接分配给元素。 jQuery分配一个单一的通用处理程序（使用 addEventListener 或 attachEvent ，无论什么可用）永远不会看到当事件发生时，它会查找 event.type ，然后查找元素的 .data（）以查看是否有这种类型的处理程序，如果是，请调用它们。

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.

所以如果你有一些脚本覆盖 jQuery.cache ，你已经有效地孤立了这些处理程序。除非你有对该处理程序的引用，否则不能删除与 addEventListener 绑定的处理程序。由于jQuery的通用处理程序也存储在 jQuery.cache 中，除非您销毁元素本身，否则无法解除绑定。

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.

我不记得具体的通用处理程序是否引用了 jQuery.cache 或者只是其子集。它所持有的引用将会影响到可能存在多少泄漏数据。

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.

这篇关于JavaScript事件处理程序在哪里存储？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！