javascript - type - DOMNodeInserted equivalente en IE?

mutationobserver javascript

Question

Aparte de usar un temporizador para contar la cantidad de elementos a lo largo del tiempo y buscar cambios, no puedo pensar en una mejor manera de simular este evento.

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

Answer 1

Parece, los comportamientos DHTML se pueden usar en IE para DOMNodeInserted .

Answer 2

Puede anular todos los métodos de manipulación de DOM (appendChild, insertBefore, replaceChild, insertAdjacentHTML, etc.) y supervisar innerHTML con onpropertychange.

Es posible que pueda encontrar una solución que satisfaga sus requisitos.

Por cierto, parece que DOMNodeInserted, etc. será desaprobado por los navegadores en el futuro. Ver http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents

Answer 3

Una solución sucia es interceptar los métodos de prototipo de tipo Elemento de la siguiente manera:

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 4

Usar onreadystatechange como lo sugiere Paul Sweatte realmente no funciona. El evento readystatechange solo se activa al cargar foo.htc. No tiene nada que ver con cambiar el nodo DOM.

He configurado un pequeño violín para demostrarlo. Echa 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 puede ver, aunque no hay manipulación de DOM en marcha, hay un evento readystatechange.

Answer 5

onreadystatechange funcionará en IE. Se debe adjuntar un comportamiento DHTML 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);
  }

referencia de evento onreadystatechange

Answer 6

No, no hay. El más cercano es el evento propertychange , que se activa en respuesta a un cambio en un atributo o propiedad CSS de un elemento. Se dispara en respuesta a cambiar la propiedad innerHTML de un elemento directamente, pero no cuando el contenido de los elementos se modifica por algún otro medio (por ejemplo, al usar métodos DOM como appendChild() o al modificar el innerHTML de un elemento secundario).

ACTUALIZACIÓN 6 febrero 2014

Como se señala en los comentarios, hay una solución. Se basa en un truco elaborado y recomendaría usar observadores de mutación siempre que sea posible. Vea la respuesta de @naugtur para más detalles . La respuesta de @naugtur se ha eliminado, pero la solución se puede encontrar en https://github.com/naugtur/insertionQuery