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/.

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,