Question

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

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

Answer 1

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

2014年2月6日更新

正如评论中指出的那样，有一种解决方法。它基于精心设计的黑客攻击，我建议尽可能使用变异观察器。 ~~有关详细信息，请参阅@ naugtur的答案~~。 @ naugtur的答案已被删除，但解决方案可以在https://github.com/naugtur/insertionQuery

找到

Answer 2

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

您或许可以提出满足您要求的解决方案。

BTW，将来浏览器似乎不推荐使用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并不真正有用。仅在加载foo.htc时触发readystatechange事件。它与更改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行为可以在IE中用于模拟DOMNodeInserted。

IE中的DOMNodeInserted等效？

6 个答案:

2014年2月6日更新