javascript - DOMNodeInserted 在 IE 中的等效项？

Question

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

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

Answer 1

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

2014 年 2 月 6 日更新

正如评论中所指出的，有一种解决方法。它基于精心设计的 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 中工作。DHTML 行为必须通过 htc 附加到元素，但 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 事件参考

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

似乎，DHTML Behaviors 可以在 IE 中用于仿真DOMNodeInserted。