附加的事件处理程序“元数据”在哪里？存储？在“DOM”上，对象，或者……？

Question

我一直想知道......所以你有这样的代码：

$('#click-me');

然后将其附加到：

$('#click-me').click(someFunction);

“元数据”在哪里，上面写着：

“嘿“jQuery-object #click-me，”我当您被点击时，将指向“someFunction”！”

我知道事件处理程序可能会被破坏，例如我在 Backbone.js 中的情况，由于我重新渲染整个页面，我的事件停止触发，破坏了一些背景一路上的函数/对象/视图..（这是我问这个问题的上下文）

现在，我的问题是：

在哪里事件“元数据”存储以及如何销毁？ 它们是否存储在将其绑定到函数的函数中？它们是否在 DOM“元数据”（如果有的话）本身内？

我正在尝试学习 JavaScript 的复杂性，因为我厌倦了错误。除此之外，我想知道是否应该注意可能会分离我的事件等的垃圾收集。来自 C#，我想说带有 DOM 的 JavaScript 真的很厉害......

（另外，作为旁注，我如何访问这些事件并“调试”它们？firefox？chrome？）

---

更新

换句话来说，连接 DOM 元素和某个事件的信息存储在哪里？ DOM？物体？ （或者.. jQuery 映射它吗？JavaScript 有“元数据”吗？ 它围绕该上下文..

Answer 1

更新：所以我误解了这个问题，你想知道事件如何在 javascript 和 html 的上下文中绑定。下面我原来的答案描述了 jquery 如何创建和管理事件。它归结为对 element.addEventListener 的调用。

从 MDN 文档中您可以看到事件目标可以是元素、文档、窗口或 XMLHttpRequest。来自 关于 DOM 事件的 w3 规范 事件目标添加、删除和分派事件。因此，即使信息可能存储在封装元素之类的内容中，这也将在浏览器级别实现。

从您提到的有关复制然后替换正文中的 html 的问题中，会删除事件，我认为浏览器只是为您提供标记（没有事件元数据），然后当您替换它时，元数据就消失了。 ( http://jsfiddle.net/qu9bF/1/)

---

原始答案：jquery 事件处理程序如何工作。

好的，所以我开始针对 JQuery 1.4.2 进行挖掘（因为我必须使用几个工具，所有这些工具都没有更新）

首先看一下：
http://james.padolsey.com/jquery/#v= 1.4.2&fn=click

function (fn) {
    return fn ? this.bind(name, fn) : this.trigger(name);
}

这就是 click 的定义方式，它实际上并不是在代码中定义的。 JQuery 为所有事件/处理函数定义了这个函数，如下所示，是的！它们是动态创建/定义的：

jQuery.each( ("blur focus focusin focusout load resize scroll unload click
            dblclick " +
        "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
        "change select submit keydown keypress keyup error").split(" "), 
    function( i, name ) {
        // the magic happens here..
        //each string is added as a function to the prototype
        jQuery.fn[ name ] = function( fn ) {
                return fn ? this.bind( name, fn ) : this.trigger( name );
        };//if a handler is NOT specified then attach an event OR call/trigger it

        if ( jQuery.attrFn ) {
                jQuery.attrFn[ name ] = true;
        }
});

从这里开始，我们需要查看绑定，现在 bind() 和 one() 也被定义为这。在此处搜索“代码：绑定和一个事件” a>

从这里我使用 chrome 和这个小提琴 http://jsfiddle.net/qu9bF/ 单步执行代码。 c.each(["bind") 中的块是定义绑定函数的方式。源代码已缩小，但是 chrome 可以对其进行格式化。

从这里开始，代码调用JQuery.events.add，您可以在事件部分这里。这不是记录的add() 我认为

在底部，这一段代码是有魔力的。它相应地调用 element.addEventListener 或 attachEvent。了解它如何添加on 用于 attachEvent。

// Check for a special event handler
// Only use addEventListener/attachEvent if the special
// events handler returns false
if ( !special.setup || 
      special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
      // Bind the global event handler to the element
       if ( elem.addEventListener ) {
             elem.addEventListener( type, eventHandle, false );

        } else if ( elem.attachEvent ) {
             elem.attachEvent( "on" + type, eventHandle );
        }
 }

现在你就拥有了！ :) 我希望它能回答你的两个问题。您可以链接到 jquery 源代码的非缩小版本，并逐步浏览它以找出问题所在。 IMO 有时 IE9 的调试器更直观（这是我使用它的唯一用途），并且使用我提到的页面来理智地浏览源代码。

Answer 2

jQuery 将所有事件绑定和数据缓存存储在 jQuery.cache 对象上。当您使用 jQuery html、empty、remove< 时，所有用 jQuery 包装并绑定了事件或数据集的 DOM 节点将被自动清除。 /code>、replace 等。

这就是为什么永远不要使用 innerHTML 或其他本机 DOM 方法来插入/替换之前由 jQuery 更改的内容非常重要的原因。除非您手动重置 jQuery.cache 对象，否则它将导致您无法清除的泄漏。

还有一个未记录的方法 jQuery.cleanData ，它将 DOM 节点集合作为参数，迭代它们并清理它们的所有事件绑定、数据并从缓存中删除对这些元素的引用。如果您有与主 DOM 树分离的 DOM 片段，并且存在无法正确清理它们的风险，则此选项可能会很有用。

Answer 3

像点击或提交这样的常规事件（当不受 jQuery 约束时）实际上只是 DOM 元素本身的属性（“onclick”、“onsubmit”）。

对于 jQuery 事件，当您绑定它们时，库会保留它自己的记录，并在您触发它们时查看它。 jQuery 将有关元素的所有数据放在一个标准位置，您可以使用 $(e).data() 访问该位置。对于事件，它只是 $(e).data('events')。

您可以使用 $().unbind() 取消绑定 jQuery 事件，并使用 delete 关键字来删除与给定事件对应的对象属性的常规事件。

Answer 4

jQuery 保留自己的元素事件处理程序映射。除非您以某种方式滥用图书馆，否则很少，非常罕见，有理由担心这一点。