DOMNodeInserted equivalent in IE?

放肆的年华 提交于 2019-11-26 14:42:09

No, there isn't. The nearest is the propertychange event, which fires in response to a change in an attribute or CSS property of an element. It fires in response to changing the innerHTML property of an element directly but not when the contents of the elements are altered by some other means (e.g. by using DOM methods such as appendChild() or by altering the innerHTML of a child element).

UPDATE 6 February 2014

As pointed out in the comments, there is a workaround. It's based on an elaborate hack and I'd recommend using mutation observers instead wherever possible. See @naugtur's answer for details. @naugtur's answer has been deleted but the solution can be found at https://github.com/naugtur/insertionQuery

You can over-ride all the DOM-manipulation methods - appendChild, insertBefore, replaceChild, insertAdjacentHTML, etc - and monitor innerHTML with onpropertychange.

You might be able to come up with a solution that satisfies your requirements.

BTW, it seems that DOMNodeInserted, etc will be deprecated by browsers in the future. See http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents

Paul Sweatte

onreadystatechange will work in IE. A DHTML behavior must be attached to the element via htc, but the htc file does not have to exist:

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

A dirty workaround is to intercept the prototype methods of type Element as follows:

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);
});
Kermit_the_frog

Using onreadystatechange as suggested by Paul Sweatte does not really work. The readystatechange event is only triggered while loading foo.htc. It has nothing to do with changing the DOM node.

I've set up a little fiddle to demonstrate it. Have a look at http://jsfiddle.net/Kermit_the_frog/FGTDv/ or 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);
});

As you can see: even though there is no DOM manipulation going on there is a readystatechange event.

4esn0k

Seems, DHTML Behaviors can be used in IE to emulative DOMNodeInserted.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!