javascript - 在每个 dom 更改和操作上运行脚本

Question

我有一个 Backbone 播放器，可以在任何给定时间播放歌曲列表，并固定在页面底部。我还有几个页面(使用 Backbone Router 工作)包含专辑和歌曲，因此用户可以单击任何内容上的“播放”，然后播放器开始播放所选专辑或歌曲。

我想在该专辑或歌曲上显示当前正在播放的内容，即使用户导航到其他页面或搜索某些内容(例如，结果中的专辑之一就是当前正在播放的专辑)。

现在，我添加了一个关于玩家进度的回调，它每秒搜索 $('.album[data-id="..."]) 并添加适当的类，等等。问题是这是资源密集型的，需要大量的时间和 CPU 能力(CSS 选择器很慢)。

有没有办法实时监听应用程序中的每个 dom 更改，并在这些更改而不是歌曲进度上运行脚本？

谢谢。

Answer 1

您可以简单地使用最近在现代网络浏览器中引入的Mutation events。

例如，如果您想在将同级元素附加到特定元素后执行操作:


element.addEventListener("DOMNodeInserted", function (ev) {
//...
}， 错误的);


此外，还有更多事件可以让您检测其他更改:

• DOMAttr修改
• DOMAttributeName更改
• DOMCharacterDataModified
• DOMElementName已更改
• 已插入 DOMNode
• DOMNodeInsertedIntoDocument
• DOMNode 已删除
• DOMNodeRemovedFromDocument
• DOMSubtree修改

了解更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

尽管此事件的性能取决于浏览器的版本(例如，Google Chrome 在处理此类事件时似乎速度更快)以及客户端资源，例如CPU。