Question

假设我有一个给定的HTML元素，例如：

<div id="foo">...</div>

在该元素中，可能会发生许多会改变该元素的某些显示配置的事情，例如它的高度或固定位置。

无论如何，我可以跟踪与该元素显示相关的任何变化吗？当元素更改任何显示变量时是否会触发一般事件？

Answer 1

只需使用如下内容：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // Use of the information here.
});

observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

在对MutationObserver的调用中，您可以听取事件并获取变量突变中更改的元素列表。

在observer.observe的第一个参数中，您可以设置要监听的元素。在同一方法的第二个参数中，您可以设置您想要听的内容。

此代码适用于Chrome，Firefox和Safari。使用其他浏览器，您可以使用'DOMAttrModified'和'propertychange'等事件，例如，如果您只想查看已修改的属性。

祝你好运。

Answer 2

看起来您可能指的是mutation events（在潜在相关问题here中找到）。您可能已经发现，大多数变化跟踪都以输入元素为中心。

我以前没有正确使用过这些，所以我不能提供很多关于实现的内容。希望这有帮助！

Answer 3

我认为跟踪事件是不可能的，这里有一个完整的事件列表： http://www.quirksmode.org/dom/events/index.html

使用Javascript跟踪HTML元素的显示更改

3 个答案: