文档和 DOM 有什么区别？答案

【问题标题】：What's the difference between the document and the DOM?文档和 DOM 有什么区别？
【发布时间】：2010-07-10 08:31:29
【问题描述】：

所以我发现了一篇关于 jQuery 的 bind() 和 live() 之间的区别 - http://msdn.microsoft.com/en-gb/scriptjunkie/ee730275.aspx - (Live and Let Die 部分)

bind 函数将事件处理程序注册到实际选择的 DOM 元素中，但 live 函数将事件处理程序注册到文档上。

我已经使用了这两个函数，所以我在实践中有所不同，即 .live('click', function() {..});将在 JS 注入节点上触发，而绑定等效项不会。

我不知道的是文档和 DOM 之间的关系/差异。有大神能指点一下吗？

谢谢，丹尼斯

【问题讨论】：

标签： jquery events dom document

【解决方案1】：

您所指的“文档”是浏览器在 JavaScript 中公开的 window.document 变量，是 DOM 的根节点。请记住，DOM 就像您的 HTML 文档一样，是元素的层次结构。

事件在 DOM 中的工作方式是它们从层次结构的顶部（文档）向下传递到相关元素，从而允许介于两者之间的每个元素捕获事件。然后，他们再次通过层次结构返回，称为冒泡。您提到的 jQuery 方法都与事件的冒泡阶段挂钩。

通过挂钩到文档上的click 事件，您可以看到所有元素上的所有click 事件，因为它们都通过根节点，即文档。 jQuery 然后根据您的选择器过滤您需要的内容。

如果您只使用bind，您将挂钩到给定时间存在的给定元素的事件。如果您稍后向页面添加新元素，它们将不会绑定回调。

【讨论】：

+1 说得好。也许您可以多写一些关于 DOM 的内容，因为它不仅仅是元素的层次结构，它是内存中的表示，它公开了一个允许您与实际页面交互的接口。

【解决方案2】：

文档和 DOM 没有区别。这是文档对象和单个 DOM 元素对象之间的区别。 live 函数监视文档中的所有事件，如果触发事件的对象与选择器匹配，它将调用处理程序。另一方面，bind 函数监视由特定元素对象（处理程序附加到该特定对象）触发的事件。如果您删除并重新创建元素，它将是一个不同的对象，并且不会附加事件处理程序。这意味着您在运行bind 时必须知道对象是什么。

【讨论】：