DOMNodeInserted 在 IE 中的等效项？

Question

除了使用计时器来计算元素随时间变化的数量并寻找变化之外，我想不出更好的方法来模拟这个事件。

是否有某种专有的 IE 版本的 DOMNodeInserted？谢谢。

Answer 1

不，没有。最接近的是 propertychange 事件，它响应元素的属性或 CSS 属性的变化而触发。它会在直接更改元素的 innerHTML 属性时触发，但不会在元素的内容通过其他方式更改时触发（例如，通过使用诸如 appendChild() 之类的 DOM 方法或通过更改子元素的 innerHTML元素）。

2014 年 2 月 6 日更新

正如 cmets 中所指出的，有一种解决方法。它基于精心设计的 hack，我建议尽可能使用突变观察者。 详见@naugtur 的回答。 @naugtur 的答案已被删除，但可以在 https://github.com/naugtur/insertionQuery 找到解决方案

Answer 2

您可以覆盖所有 DOM 操作方法 - appendChild、insertBefore、replaceChild、insertAdjacentHTML 等 - 并使用 onpropertychange 监视 innerHTML。

您或许能够提出满足您要求的解决方案。

顺便说一句，DOMNodeInserted 等似乎将来会被浏览器弃用。 见http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents

Answer 3

onreadystatechange 将在 IE 中工作。必须通过 htc 将 DHTML 行为附加到元素，但 htc 文件不必存在：

if (!!document.addEventListener)
  {
  $(domnode).get(0).addEventListener("DOMNodeInserted", fixtext, false);
  }
else
  {
  $(domnode).get(0).addBehavior("foo.htc");
  $(domnode).get(0).attachEvent("onreadystatechange", fixtext);
  }

onreadystatechange event reference

Answer 4

一个肮脏的解决方法是截取 Element 类型的原型方法，如下所示：

window.attachEvent('onload', function() {
    invokeNodeInserted(document);
    (function(replace) {
        Element.prototype.appendChild = function(newElement, element) {
            invokeNodeInserted(newElement);
            return replace.apply(this, [newElement, element]);
        };
    })(Element.prototype.appendChild);
    (function(replace) {
        Element.prototype.insertBefore = function(newElement, element) {
            invokeNodeInserted(newElement);
            return replace.apply(this, [newElement, element]);
        };
    })(Element.prototype.insertBefore);
    (function(replace) {
        Element.prototype.replaceChild = function(newElement, element) {
            invokeNodeInserted(newElement);
            return replace.apply(this, [newElement, element]);
        };
    })(Element.prototype.replaceChild);
});

Answer 5

按照 Paul Sweatte 的建议使用 onreadystatechange 并没有真正起作用。 readystatechange 事件仅在加载 foo.htc 时触发。它与更改 DOM 节点无关。

我已经设置了一个小小提琴来演示它。看看http://jsfiddle.net/Kermit_the_frog/FGTDv/ 或http://jsfiddle.net/Kermit_the_frog/FGTDv/embedded/result/。

HTML：

<input type="button" id="fooBtn" value="add" />
<div id="fooDiv"></div>

JS/Jquery：

function bar(e) {
    var state = $('#fooDiv').get(0).readyState;
    alert (state);
}

$("#fooBtn").on("click", function(){
    $('#fooDiv').get(0).addBehavior("foo.htc");
    $('#fooDiv').get(0).attachEvent("onreadystatechange", bar);
});

如您所见：即使没有进行 DOM 操作，也会有一个 readystatechange 事件。

Answer 6

看来，可以在 IE 中使用 DHTML Behaviors 来模拟 DOMNodeInserted。