是那里DOMAttrModified替代将在WebKit的工作

StackOverflow https://stackoverflow.com/questions/1882224

  •  18-09-2019
  •  | 
  •  

题

我需要利用此DOM事件。 IE浏览器有onpropertychange，它做什么，我需要它也是这样做。 WebKit的似乎并不不过支持这项活动。有没有我可以使用的方法吗？

有帮助吗？

解决方案

虽然Chrome浏览器不会发出DOMAttrModified事件，更lightweighted突变观察家们自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

其他提示

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

我有同样的问题，并打算修改setAttribute的，所以看到什么肖恩做，我复制了。除了当一个属性被反复设置为相同的值，所以我加了一个检查，以我的副本，如果该值没有被改变，跳过触发事件，这是射击伟大的工作。我还添加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();

请参阅代码： https://github.com/meetselva/attrchange/blob/master/attrchange.js “DOMAttrModified” +（“为propertyChange”的IE）是在你的情况下，使用存在等。如果它不适合你，“丑陋”的解决方案，能够满足这种需求应该是的setInterval（函数（）{}，延迟） 否则看到肖恩·霍根上面张贴。

由@Filip提供的解决方案是关闭（并且可以在时间工作过），但现在你需要请求旧的属性值的递送。

因此，你会想改变：

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

这样：

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

否则，你将不会看到oldValues（你会得到空来代替。）这是在Chrome 34.0.1847.131测试（正式版本265687）M

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top