DOMNodeInserido equivalente no IE?

Question

Além de usar um cronômetro para contar o número de elementos ao longo do tempo e procurar mudanças, não consigo pensar em uma maneira melhor de simular esse evento.

Existe algum tipo de versão proprietária do IE do DOMNodeInserted?Obrigado.

Answer 1

Não, não há. O mais próximo é o propertychange Evento, que dispara em resposta a uma alteração em um atributo ou propriedade CSS de um elemento. Dispara em resposta à alteração do innerHTML propriedade de um elemento diretamente, mas não quando o conteúdo dos elementos é alterado por alguns outros meios (por exemplo, usando métodos DOM, como appendChild() ou alterando o innerHTML de um elemento filho).

Atualização 6 de fevereiro de 2014

Como apontado nos comentários, há uma solução alternativa. É baseado em um hack elaborado e eu recomendo o uso de observadores de mutação sempre que possível. Veja a resposta de @Naugtur para obter detalhes. A resposta de @Naugtur foi excluída, mas a solução pode ser encontrada em https://github.com/naugtur/insertionQuery

Answer 2

Você pode exagerar todos os métodos de manipulação DOM - AppendChild, inserir antes, replacechild, insertadjacenthtml, etc - e monitorar o inerhtml com o OnPropertyChange.

Você pode encontrar uma solução que atenda aos seus requisitos.

BTW, parece que o DomnodeInserted, etc, será preso pelos navegadores no futuro. Ver http://www.w3.org/tr/dom-level-3-events/#events-mutação

Answer 3

OnreadyStateChange funcionará no IE. Um comportamento DHTML deve ser anexado ao elemento via HTC, mas o arquivo HTC não precisa existir:

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

Referência de eventos ONREADESTATECHANGE

Answer 4

Uma solução alternativa suja é interceptar os métodos de protótipo do elemento de tipo da seguinte forma:

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

Usar o OnreadyStatechange, conforme sugerido por Paul Sweatte, não funciona realmente. O evento ReadyStateChange é acionado apenas ao carregar foo.htc. Não tem nada a ver com a alteração do nó DOM.

Eu configurei um pequeno violino para demonstrá -lo. Dê uma olhada em http://jsfiddle.net/kermit_the_frog/fgtdv/ ou 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 você pode ver: mesmo que não haja manipulação de DOM, existe um evento ReadyStatechange.

Answer 6

Parece que os comportamentos DHTML podem ser usados ​​no IE para emular DOMNodeInserted.