是否有替代DOMAttrModified，将在webkit中工作

我需要利用此DOM事件。 IE有onpropertychange，这做我也需要它做。然而，Webkit似乎不支持这个事件。有没有其他方法可以使用？是否有替代DOMAttrModified，将在webkit中工作

2009-12-10 blockhead

我能想出在此基础上的东西[http://www.west-wind.com/Weblog/posts/453942.aspx](http： //www.west-wind.com/Weblog/posts/453942.aspx） – blockhead 2010-03-02 19:17:04

基于[David Walsh的解决方案]（http://davidwalsh.name/detect-node-insertion）我创建了一个小型库捕获DOM插入。如果您可以在您感兴趣的更改之后编写与该元素相匹配的CSS选择器 - 这是一个有效的解决方案。它涵盖了比DOM突变观察者更多的浏览器。请参阅：https：// github。com/naugtur/insertionQuery – naugtur 2013-03-10 22:47:25

虽然Chrome浏览器不会发出DOMAttrModified事件，自2011年以来支持的轻量级突变观察员越来越多，这些工作也用于属性更改。

这里是文档正文的例子：

var 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>

控制台：

> color red black

来源

2012-05-05 21:46:33 daluege

看来，这目前不能与CSS3“resize：both”属性结合使用。观察者不会通过拖动调整大小手柄来获取元素的更改。 – cburgmer 2012-08-27 10:33:19

有什么办法可以看到变化来自哪里？我有一个元素的类正在通过JS在某处进行更改，我试图找出从哪里开始，但Chrome的事件堆栈跟踪没有显示启动事件的代码。 – 2013-05-28 19:16:00

值得注意的是，当属性改变时，DOMAttrModified立即触发，但是突变观察者排队事件。所以两者之间并没有那么微妙的区别。 – 2014-12-10 16:37:22

如果你很高兴与仅仅检测调用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); 
}

来源

2010-03-03 11:31:00

请参阅代码： https://github.com/meetselva/attrchange/blob/master/attrchange.js 'DOMAttrModified'+（'propertychange'for IE）在那里用在你的情况。如果它不适合你，那么可以满足这个需求的“丑陋”解决方案应该是setInterval（function（）{}，delay）否则请参阅上面的Sean Hogan。

来源

2014-03-05 08:18:47 user1700099

网址无效 – 2015-05-11 11:35:49

@Filip提供的解决方案是关闭的（并且可能在当时已经工作），但现在您需要请求传递旧的属性值。

因此，你会想改变：

observer.observe(element, { attributes: true, subtree: bubbles });

这样：

observer.observe(element, { attributes: true, attributeOldvalue:true, subtree: bubbles });

否则，你将不会看到oldValues（你会得到空代替）这是在Chrome 34.0.1847.131（Official Build 265687）中测试。

来源

2014-05-05 01:12:28 user1055892

我有同样的问题，并正在考虑修改setAttribute，所以看到what Sean did，我复制了。工作得很好，除了当属性被重复设置为相同的值时它被触发，所以我添加了一个检查到我的副本，以避免在没有更改值时触发事件。我还添加了val = String(val)，根据setAttribute将数字强制为字符串的基本原理，所以比较应该可以预料到。

我修改后的版本是：

var 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();

来源

2014-10-03 05:19:45

是否有替代DOMAttrModified，将在webkit中工作

回答

相关问题