html5 - play - video html javascript
Reemplazo de eventos de mutación DOM (4)
La razón por la que los eventos de mutación se desaprobaron fue debido a los enormes problemas de rendimiento.
El reemplazo es Mutation Observers , mira http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers y https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers
La información sobre mutaciones se entrega a los observadores como una secuencia ordenada de registros de mutaciones, que representa una secuencia observada de cambios que se han producido
Uso de muestra:
var observer = new MutationObserver(function(mutationRecords) {
// Handle mutations
});
observer.observe(myNode,
{ // options:
subtree: true, // observe the subtree rooted at myNode
childList: true, // include information childNode insertion/removals
attribute: true // include information about changes to attributes within the subtree
});
Esto es compatible con las versiones nocturnas de Chrome 18 y Firefox y Webkit. Firefox 14 también será compatible con esta característica.
Dado que la mutación DOM está marcada como obsoleta por el w3c (consulte http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents ), ¿existe alguna forma alternativa (rápida) de detectar modificaciones de atributos? en el DOM?
Un gran reemplazo para los eventos DOM * obsoletos es animationStart junto con CSS Animations. David Walsh escribe sobre el método.
Primero, configure los fotogramas clave y aplíquelos a los elementos que desea escuchar ( ¡no olvide los prefijos del proveedor! ):
@keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
#parentElement > li {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
A continuación, agregue el oyente:
var insertListener = function(event){
if (event.animationName == "nodeInserted") {
// This is the debug for knowing our listener worked!
// event.target is the new node!
console.warn("Another node has been inserted! ", event, event.target);
}
}
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
Ta-da! Aquí está la demostración de David . Funciona muy bien para mí en una extensión de Chrome que agrega imágenes de Facebook a Google Voice (mira content.css e injected.js).
Un año después , están los nuevos y brillantes https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers del DOM Nivel 4 (¡sigue los enlaces allí, explican mucho!). Cuando un Mutation Event dispara mil veces, MutationObserver dispara solo una vez con todas las modificaciones contenidas y accesibles.
Funciona para (a partir de 2017/03):
- Firefox 14+
- IE 11
- Borde
- Opera 15+
- Chrome 26+ (18 a 25 con prefijo,
window.WebKitMutationObserver) - Safari 6.0 (prefijado,
window.WebKitMutationObserver)
Por lo que yo sé, no hay alternativa (todavía), así que estás atascado con DOMAttrModified que solo es compatible con Firefox y Opera. En IE tienes el evento onpropertychanged pero no hay forma de obtener una funcionalidad similar en Chrome / Safari. Hay varias cosas que podría hacer dependiendo de lo que está tratando de lograr y de los navegadores a los que apunta:
- definir getters y setters a los atributos que desea monitorear
- anula métodos como
document.createAttribute,attributes.setNamedItem, ...
He estado trabajando en una solución de navegador cruzado pero sin mucho éxito. Debe mantenerse alejado de los eventos de mutación, ya que no son de navegador cruzado y son muy lentos. Hay buenas razones por las que están en desuso. Si quieres aprender más, lee esto: