Javascript事件处理程序存储在哪里？

Question

我想弄清楚的DOM如何跟踪事件处理程序,无论是通过使用jQuery的addEventListener约束,或通过HTML属性(如的onload ="myFunc的()").

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

此外,在使用Chrome的Web检查一些测试,我用控制台通过拉动在用较新的替换上现场直播一个版本的jQuery的<script>标签,从而重写jQuery和$变量.显然,在替换之前使用jQuery绑定的事件丢失了,因为在该过程中引入了新的.data()接口.

然而,那些"丢失"的处理程序仍然受某些事件的约束,因为它们实际上最终在事件触发时被调用.假设我想完全删除它们,或者用我自己的处理程序取代它们？这就是为什么我想知道如何在DOM保存它们的地方访问实际的处理程序......并且没有jQuery.

Answer 1

关于类似的方法addEventListener,它们在常规JavaScript代码中不能直接显示.它们存储在内部.

关于内联处理程序,它们只是直接存储在DOM元素上,就像典型的处理程序一样,所以这样:

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

有效地成为这个:

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

(较旧的IE不包含event函数中的参数.)

关于jQuery,你是对的,它们存储在.data()或更准确jQuery.cache.

但是您的处理程序永远不会直接分配给元素.jQuery分配一个你从未见过的通用处理程序(使用addEventListener或者attachEvent可用的任何东西).当事件发生时,它会查看event.type,然后查找元素.data()以查看是否存在该类型的处理程序,如果是,则调用它们.

因此,如果你有一些覆盖的脚本jQuery.cache,你就会有效地孤立这些处理程序.addEventListener除非您具有对该处理程序的引用,否则无法删除绑定的处理程序.由于jQuery的通用处理程序也存储在其中jQuery.cache,除非你破坏元素本身,否则无法取消绑定它.

我不记得具体的处理程序是否有引用jQuery.cache或只是它的一个子集.它所持有的参考将对可能存在多少泄漏数据产生影响.