DOMNodeInserted equivalente en IE?

Question

Aparte de usar un temporizador para contar el número de elementos en el tiempo y en busca de cambios, no puedo pensar en una mejor manera de simular este evento.

¿Hay algún tipo de versión propietaria de IE DOMNodeInserted? Gracias.

Answer 1

No, no lo hay. El más cercano es el caso propertychange, que dispara en respuesta a un cambio en un atributo o CSS propiedad de un elemento. Se dispara en respuesta a los cambios de la propiedad innerHTML de un elemento directamente pero no cuando los contenidos de los elementos se alteran por algún otro medio (por ejemplo, mediante el uso de métodos DOM como appendChild() o alterando la innerHTML de un elemento hijo).

ACTUALIZACIÓN 6 de febrero de 2014

Como se señaló en los comentarios, hay una solución. Se basa en un truco elaborado y recomiendo el uso de observadores de mutación lugar siempre que sea posible. Véase la respuesta de @ naugtur para obtener más información . @ Respuesta de naugtur ha sido eliminado, pero la solución se puede encontrar en https://github.com/naugtur/insertionQuery

Answer 2

Se puede pasar por encima de todos los métodos de manipulación de DOM-- appendChild, InsertBefore, replaceChild, insertAdjacentHTML, etc - y controlar innerHTML con onPropertyChange.

podría ser capaz de llegar a una solución que satisfaga sus necesidades.

Por cierto, parece que DOMNodeInserted, etc quedará obsoleta por los navegadores en el futuro. Ver http://www.w3.org/TR/DOM -Nivel-3-Events / # Eventos-mutationevents

Answer 3

onreadystatechange funcionará en IE. Un comportamiento DHTML debe estar fijado al elemento a través de HTC, pero el archivo HTC no tiene que existir:

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

onreadystatechange referencia evento

Answer 4

Una solución sucia es interceptar los métodos prototipo del tipo de elemento como sigue:

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

El uso de onreadystatechange según lo sugerido por Paul Sweatte no funciona muy bien. El evento se activa sólo ReadyStateChange mientras foo.htc carga. No tiene nada que ver con el cambio del nodo DOM.

He creado un poco de violín a demostrarlo. Echar un vistazo a http://jsfiddle.net/Kermit_the_frog/FGTDv/ o 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);
});

Como se puede ver:. A pesar de que no hay manipulación DOM pasando allí es un evento ReadyStateChange

Answer 6

parece, DHTML comportamientos pueden usarse en IE para DOMNodeInserted emulativo.