javascript - event - mutationobserver example

Alternativa a DOMNodeInserted

Question

DOMNodeInserted es conocido por hacer que las páginas dinámicas sean lentas, MDN incluso recomienda no usarlas por completo, pero no proporciona ninguna alternativa.

No estoy interesado en el elemento insertado, solo necesito saber cuando algún script modifica el DOM. ¿Existe una mejor alternativa a los detectores de eventos de mutación (tal vez getElementsByTagName dentro de un nsiTimer)?

Answer 1

Esto se publica aquí porque esta es la pregunta de dónde busqué ayuda con DOMNodeInserted que falla con IE9, pero tenga en cuenta que esta solución es específicamente para una situación en la que jQuery se utiliza en un contexto ASP.NET que utiliza una función de solicitud final. Su millaje puede variar, etc.

Básicamente, tiraremos el DOMNodeInserted por completo y usaremos End Request para cargar nuestro controlador de eventos:

ANTIGUO:

$(document).ready(function() {

$(document).bind(''DOMNodeInserted'', function(event){
My jQuery event handler...

 }); 
});

================================

NUEVO:

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

Answer 2

La misma técnica descrita por csuwldcat se ha convertido en un complemento jQuery fácil de usar (si eso es lo suyo): https://github.com/liamdanger/jQuery.DOMNodeAppear

Answer 3

Si está creando una aplicación web orientada a teléfonos móviles recientes y versiones más recientes de navegadores (Firefox 5+, Chrome 4+, Safari 4+, iOS Safari 3+, Android 2.1+), puede usar el siguiente código para crear evento para la inserción de nodos dom, e incluso se ejecuta en los nodos inicialmente parte del marcado estático de la página!

Aquí está el enlace a la publicación completa con y ejemplo: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Nota sobre los observadores de mutaciones: si bien las características más nuevas de Mutation Observers en navegadores recientes son excelentes para monitorear inserciones simples y cambios al DOM, entiendo que este método puede usarse para hacer mucho más ya que le permite monitorear cualquier regla CSS que coincida puede cosa de. Esto es súper poderoso para muchos casos de uso, así que lo envolví en una biblioteca aquí: https://github.com/csuwildcat/SelectorListener

Tendrá que agregar los prefijos apropiados al nombre del evento CSS y animación para comenzar si quiere enfocar varios navegadores. Puede leer más sobre eso en la publicación vinculada a arriba.

El caso de inserción de nodo básico

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

Escuchando coincidencias de selector más complejas:

Esto permite cosas que son casi imposibles de hacer con los observadores de mutaciones

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

Answer 4

Si todo lo que quiere hacer es desencadenar un evento cuando el DOM cambie, haga algo como esto:

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

Answer 5

Una nueva alternativa que @naugtur mencionó brevemente es MutationObserver . Está diseñado como un reemplazo para los eventos de mutación en desuso, si el (los) navegador (s) que está (n) desarrollando lo respaldan (por ejemplo, si está desarrollando una extensión de navegador).