在webkit中是否有可以使用的DOMAttrModified替代方案
我需要利用这个DOM事件。IE有onpropertychange，它也做了我需要它做的事情。然而，Webkit似乎不支持此事件。我可以使用其他方法吗？如果您只喜欢检测对在webkit中是否有可以使用的DOMAttrModified替代方案,dom,webkit,mutation-events,Dom,Webkit,Mutation Events,我需要利用这个DOM事件。IE有onpropertychange，它也做了我需要它做的事情。然而，Webkit似乎不支持此事件。我可以使用其他方法吗？如果您只喜欢检测对setAttribute（）的调用（而不是监视所有属性修改），那么您可以在所有元素上使用以下方法： Element.prototype._setAttribute = Element.prototype.setAttribute Element.prototype.setAttribute = function(name, val
setAttribute（）Element.prototype._setAttribute = Element.prototype.setAttribute
Element.prototype.setAttribute = function(name, val) {
var e = document.createEvent("MutationEvents");
var prev = this.getAttribute(name);
this._setAttribute(name, val);
e.initMutationEvent("DOMAttrModified", true, true, null, prev, val, name, 2);
this.dispatchEvent(e);
}
尽管Chrome不发送
DOMAttrModifiedvar element = document.body, bubbles = false;
var observer = new WebKitMutationObserver(function (mutations) {
mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: bubbles });
function attrModified(mutation) {
var name = mutation.attributeName,
newValue = mutation.target.getAttribute(name),
oldValue = mutation.oldValue;
console.log(name, newValue, oldValue);
}
console.log<body color="black">
<script type="text/html">
document.body.setAttribute("color", "red");
</script>
</body>
document.body.setAttribute（“颜色”、“红色”）；
>红色-黑色否则，请参阅上面的Sean Hogan帖子。由@Filip提供的解决方案已经接近成功（当时可能已经成功），但现在您需要请求传递旧的属性值 因此，您需要更改：
observer.observe(element, { attributes: true, subtree: bubbles });
observer.observe(element, { attributes: true, attributeOldvalue:true, subtree: bubbles });
否则，您将看不到旧值（改为null）。这是在Chrome 34.0.1847.131（官方版本265687）m中测试的。我有同样的问题，正在考虑修改
setAttributeval=String（val）setAttributevar emulateDOMAttrModified = {
isSupportedNatively: function () {
var supported = false;
function handler() {
supported = true;
}
document.addEventListener('DOMAttrModified', handler);
var attr = 'emulateDOMAttrModifiedTEST';
document.body.setAttribute(attr, 'foo'); // aka $('body').attr(attr, 'foo');
document.removeEventListener('DOMAttrModified', handler);
document.body.removeAttribute(attr);
return supported;
},
install: function () {
if (!this.isSupportedNatively() &&
!Element.prototype._setAttribute_before_emulateDOMAttrModified) {
Element.prototype._setAttribute_before_emulateDOMAttrModified = Element.prototype.setAttribute
Element.prototype.setAttribute = function(name, val) {
var prev = this.getAttribute(name);
val = String(val); /* since attributes do type coercion to strings,
do type coercion here too; in particular, D3 animations set x and y to a number. */
if (prev !== val) {
this._setAttribute_before_emulateDOMAttrModified(name, val);
var e = document.createEvent('MutationEvents');
e.initMutationEvent('DOMAttrModified', true, true, null, prev, val, name, 2);
this.dispatchEvent(e);
}
};
}
}
};
// Install this when loaded. No other file needs to reference this; it will just make Chrome and Safari
// support the standard same as Firefox does.
emulateDOMAttrModified.install();
这似乎目前无法与CSS3的“resize:tware”属性结合使用。观察者将不会通过用户拖动调整大小手柄来拾取对元素的更改。是否有任何方法可以查看更改的来源？我有一个元素，它的类通过JS在某处发生了更改，我试图找出它的来源，但是Chrome的事件堆栈跟踪没有显示启动事件的代码。值得注意的是，
domatrtModifiedWebkit