文档和 DOM 有什么区别?

发布于 2024-09-08 18:08:56 字数 463 浏览 8 评论 0原文

所以我遇到了一篇关于 jQuery 的 bind() 和 live() 之间差异的文章 - http://msdn.microsoft.com/en-gb/scriptjunkie/ee730275.aspx -(生与死部分)

bind 函数使用所选的实际 DOM 元素注册事件处理程序,但 live 函数在文档上注册事件处理程序。

我已经使用了这两个函数,因此我在实践中得到了差异,即。 live('点击', function() {..});将在 JS 注入节点上触发,而等效的绑定则不会。

我不知道文档和 DOM 之间的关系/区别。有人可以启发我吗?

谢谢, 丹尼斯

So I came across a piece about the difference between jQuery's bind() and live() - http://msdn.microsoft.com/en-gb/scriptjunkie/ee730275.aspx - (Live and Let Die section)

The bind function registers the event handlers with the actual DOM elements that were selected, but the live function registers the event handlers on the document.

I've used both functions so I get the difference in practice i.e. .live('click', function() {..}); will fire on a JS injected node, while the bind equivalent wouldn't.

What I'm not aware of is the relationship/difference between document and DOM. Can anyone enlighten me please?

Thanks,
Denis

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

辞取 2024-09-15 18:08:56

您引用的“文档”是浏览器在 JavaScript 中公开的 window.document 变量,并且是 DOM 的根节点。请记住,DOM 与 HTML 文档一样,是元素的层次结构。

事件在 DOM 中的工作方式是,它们从层次结构的顶部(即文档)传递到相关元素,从而允许中间的每个元素捕获事件。然后,他们进行第二次返回层次结构,称为冒泡。您提到的 jQuery 方法都挂钩事件的冒泡阶段。

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

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

The 'document' you refer to is the window.document variable browsers expose in JavaScript, and is the root node of the DOM. Remember that the DOM, like your HTML document, is a hierarchy of elements.

The way events work in DOM is they pass from the top of the hierarchy, the document, down to the element in question, allowing each element in between to capture the event. They then make a second pass back up the hierarchy, called bubbling. The jQuery methods you mention both hook in to the bubbling phase of events.

By hooking into the click event on the document, you get to see all click events on all elements, because they all pass through the root node, the document. jQuery then filters what you need based on your selector.

If you simply use bind, you'll hook into the events for the given elements that exist at that given time. If you later add new elements to the page, they won't have the callback bound to them.

著墨染雨君画夕 2024-09-15 18:08:56

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

It's not a difference between document and DOM. It's a difference between the document object and the individual DOM element objects. The live function watches for all events in the document and if the object that triggered the event matches the selector, it will call the handler. On the other hand, the bind function watches for events triggered by a specific element object (the handler is attached to that specific object). If you delete and re-create the element, it will be a different object, and will not have the event handler attached. This implies that you have to know what the object is at the time you run bind.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文