文档和 DOM 有什么区别?
所以我遇到了一篇关于 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您引用的“文档”是浏览器在 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 allclick
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.这不是文档和 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, thebind
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 runbind
.