除了使用计时器来计算一段时间内的元素数量并寻找变化之外,我想不出更好的方法来模拟这个事件。
是否有某种专有的 IE 版本的 DOMNodeInserted?谢谢。
除了使用计时器来计算一段时间内的元素数量并寻找变化之外,我想不出更好的方法来模拟这个事件。
是否有某种专有的 IE 版本的 DOMNodeInserted?谢谢。
不,没有。最接近的是propertychange事件,它响应元素的属性或 CSS 属性的更改而触发。它在响应直接更改innerHTML元素的属性时触发,但不会在元素的内容通过其他方式(例如,通过使用 DOM 方法,例如appendChild()或通过更改innerHTML子元素的 )更改时触发。
正如评论中所指出的,有一个解决方法。它基于精心设计的 hack,我建议尽可能使用变异观察器。有关详细信息,请参阅@naugtur 的回答。@naugtur 的回答已被删除,但可以在https://github.com/naugtur/insertionQuery找到解决方案
您可以覆盖所有 DOM 操作方法 - appendChild、insertBefore、replaceChild、insertAdjacentHTML 等 - 并使用 onpropertychange 监视 innerHTML。
您或许能够提出满足您要求的解决方案。
顺便说一句,DOMNodeInserted 等似乎将来会被浏览器弃用。见http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents
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);
}
一个肮脏的解决方法是拦截 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);
});
按照 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 事件。