Альтернатива DOMNodeInserted
Известно, что DOMNodeInserted замедляет динамические страницы, MDN даже рекомендует не использовать его вообще, но не предоставляет никаких альтернативы.
Меня не интересует вставленный элемент, мне просто нужно знать, когда какой-то скрипт изменяет DOM. Есть ли лучшая альтернатива прослушивателям событий мутации (возможно, getElementsByTagName внутри nsiTimer)?
4 ответа
Если вы создаете веб-приложение для последних мобильных телефонов и новых версий браузеров (Firefox 5+, Chrome 4+, Safari 4+, iOS Safari 3+, Android 2.1+), вы можете использовать следующий код для создайте классное событие для вставки dom-узлов, и оно даже запускается на узлах, изначально являющихся частью статической разметки страницы!
Вот ссылка на полный пост с примером: http: //www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/
Заметка о наблюдателях мутаций: , в то время как более новые наблюдатели мутаций добавлены в последние Браузеры отлично подходят для отслеживания простых вставок и изменений в DOM, они понимают, что этот метод можно использовать для гораздо большего, поскольку он позволяет отслеживать любое совпадение с правилом CSS , о котором вы можете. Это очень мощный для многих вариантов использования, поэтому я обернул это в библиотеке здесь: https://github.com/csuwildcat/SelectorListener
Вам понадобится добавить соответствующие префиксы в CSS и имя события animationstart, если вы хотите использовать разные браузеры. Вы можете прочитать больше об этом в посте, связанном с выше.
Случай вставки базового узла
CSS :
@keyframes nodeInserted {
from {
outline-color: #fff;
}
to {
outline-color: #000;
}
}
div.some-control {
animation-duration: 0.01s;
animation-name: nodeInserted;
}
JavaScript :
document.addEventListener('animationstart', function(event){
if (event.animationName == 'nodeInserted'){
// Do something here
}
}, true);
Прослушивание для более сложные совпадения селекторов:
Это позволяет делать вещи, которые практически невозможно сделать с наблюдателями мутаций
CSS :
@keyframes adjacentFocusSequence {
from {
outline-color: #fff;
}
to {
outline-color: #000;
}
}
.one + .two + .three:focus {
animation-duration: 0.01s;
animation-name: adjacentFocusSequence;
}
JavaScript :
document.addEventListener('animationstart', function(event){
if (event.animationName == 'adjacentFocusSequence'){
// Do something here when '.one + .two + .three' are
// adjacent siblings AND node '.three' is focused
}
}, true);
Если все, что вы хотите сделать, это вызвать событие при изменении DOM, сделайте что-то вроде этого:
var nodes=document.getElementsByTagName('*')||document.all;
function domchange(){
alert('Hello');
}
window.setInterval(function(){
var newnodes=document.getElementsByTagName('*')||document.all;
if(newnodes!=nodes){
nodes=newnodes;
domchange();
}
},1);
Это опубликовано здесь, потому что этот вопрос я отправил в поисках помощи при сбое DOMNodeInserted в IE9, но, пожалуйста, обратите внимание, что это решение специально для ситуации, когда jQuery используется в контексте ASP.NET, в котором используется функция End Request. , Ваш пробег может отличаться, и т. Д ....
По сути, мы собираемся полностью отбросить DOMNodeInserted и использовать End End для загрузки нашего обработчика событий:
OLD:
$(document).ready(function() {
$(document).bind('DOMNodeInserted', function(event){
My jQuery event handler...
});
});
========= ==========================
NEW:
function Ajax_EndRequest {
function2();
}
function2 (a,b){
My jQuery event handler...
}
$(document).ready(function(){
add_endRequest(Ajax_EndRequest); //this is what actually invokes the function upon request end.
My jQuery event handler...//REMOVED -- don't need this now
});
Тот же метод, что и описанный csuwldcat, был превращен в простой в использовании плагин jQuery (если это ваша вещь): https://github.com/liamdanger/jQuery.DOMNodeAppear