假设我有一个给定的 HTML 元素,例如:
<div id="foo">...</div>
在该元素内部,可能会发生很多事情会改变该元素的某些显示配置,例如它的高度或固定位置。
无论如何我可以跟踪与该元素的显示相关的任何更改吗?当元素更改任何显示变量时,是否会触发一般事件?
假设我有一个给定的 HTML 元素,例如:
<div id="foo">...</div>
在该元素内部,可能会发生很多事情会改变该元素的某些显示配置,例如它的高度或固定位置。
无论如何我可以跟踪与该元素的显示相关的任何更改吗?当元素更改任何显示变量时,是否会触发一般事件?
只需使用以下内容:
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'
,如果您只想查看修改的属性,例如。
祝你好运。
我认为不可能跟踪事件,这里是事件的完整列表: http ://www.quirksmode.org/dom/events/index.html