web-dev-qa-db-fra.com

Pourquoi l'événement DOMSubtreeModified est-il déconseillé dans DOM niveau 3?

Pourquoi l'événement DOMSubtreeModified obsolète et que sommes-nous censés utiliser à la place?

javascriptdomjavascript-eventsdeprecateddom3
49
huyz

Si vous faites défiler un pe , vous voyez:

Attention! L'interface MutationEvent a été introduite dans les événements DOM niveau 2, mais n'a pas encore été implémentée de manière complète et interopérable entre les agents utilisateurs. De plus, certains ont critiqué le fait que l'interface, telle que conçue, présente un défi de performance et d'implémentation. Une nouvelle spécification est en cours de développement dans le but de traiter les cas d'utilisation que les événements de mutation résolvent, mais de manière plus performante. Ainsi, cette spécification décrit les événements de mutation pour référence et l'exhaustivité du comportement hérité, mais déconseille l'utilisation à la fois de l'interface MutationEvent et de l'interface MutationNameEvent.

L'API de remplacement est observateurs de mutations , qui sont entièrement spécifiés dans le DOM Living Standard qui remplace toute la bêtise de niveau X du DOM.

49
Domenic

Je pense que le remplaçant sera des observateurs de mutation: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

var whatToObserve = {childList: true, attributes: true, subtree: true, attributeOldValue: true, attributeFilter: ['class', 'style']};
var mutationObserver = new MutationObserver(function(mutationRecords) {
  $.each(mutationRecords, function(index, mutationRecord) {
    if (mutationRecord.type === 'childList') {
      if (mutationRecord.addedNodes.length > 0) {
        //DOM node added, do something
      }
      else if (mutationRecord.removedNodes.length > 0) {
        //DOM node removed, do something
      }
    }
    else if (mutationRecord.type === 'attributes') {
      if (mutationRecord.attributeName === 'class') {
        //class changed, do something
      }
    }
  });
});
mutationObserver.observe(document.body, whatToObserve);
20
ralfthewise