DOMNodeInserted эквивалент в IE?

Question

Кроме использования таймера для подсчета количества элементов с течением времени и поиска изменений, я не могу придумать лучшего способа для моделирования этого события.

Существует ли какая-то проприетарная версия IE для DOMNodeInserted? Спасибо.

Answer 1

Нет, нет. Ближайшим является событие propertychange, которое запускается в ответ на изменение атрибута или свойства CSS элемента. Он запускается в ответ на изменение свойства innerHTML элемента напрямую, но не тогда, когда содержимое элементов изменяется каким-либо другим способом (например, с использованием методов DOM, таких как appendChild(), или путем изменения innerHTML дочернего элемента элемент).

ОБНОВЛЕНИЕ 6 февраля 2014 года

Как указано в комментариях, существует обходной путь. Он основан на тщательно продуманном хакере, и я бы порекомендовал вместо этого использовать наблюдателей мутаций. Подробнее см. В ответе @ naugtur . Ответ @ naugtur был удален, но решение можно найти по адресу https://github.com/naugtur/insertionQuery

Answer 2

Вы можете переопределить все методы манипулирования DOM - appendChild, insertBefore, replaceChild, insertAdjacentHTML и т. Д. - и контролировать innerHTML с помощью onpropertychange.

Возможно, вам удастся найти решение, удовлетворяющее вашим требованиям.

Кстати, похоже, что DOMNodeInserted и т. Д. Будут устаревшими браузерами в будущем. Смотри http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents

Answer 3

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

onreadystatechange ссылка на событие

Answer 4

Грязный обходной путь - перехватить методы-прототипы типа 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);
});

Answer 5

Использование 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.

Answer 6

Кажется, поведение DHTML можно использовать в IE для эмуляции DOMNodeInserted.