Applications Windows
Réduire la table des matières
Développer la table des matières
Informations
Le sujet que vous avez demandé est indiqué ci-dessous. Toutefois, ce sujet ne figure pas dans la bibliothèque.

Migration des événements de modification de propriété et de mutation vers les observateurs de mutation

Observateurs de mutation Ils fournissent aux développeurs un moyen de détecter l’insertion et la suppression d’un nœud DOM. Vous pouvez migrer le code existant en vue de remplacer les événements de mutation et/ou les événements de modification de propriété par les observateurs de mutation.

Remarque  Les observateurs de mutation bénéficient de la prise en charge à partir d’Internet Explorer 11. Ils offrent une solution rapide de remplacement de tous les scénarios pris en charge par les événements de mutation désormais déconseillés et une alternative aux scénarios pris en charge par les événements de modification de propriété.
 

Techniques héritées pour le contrôle de mutations DOM

Mutation events jouent un rôle clé sur la plateforme web. En effet, ils autorisent les applications Web à surveiller de manière synchrone les modifications dynamiques apportées aux éléments du modèle DOM (Document Object Model) d’une page Web. Bien qu’ils soient utiles, les événements de mutation ont l’inconvénient de dégrader les performances des applications, principalement en raison de leur nature synchrone et de l’architecture d’événements sur laquelle ils fonctionnent.

Remarque   Les événements de mutation (tels que définis dans la spécification W3C DOM Level 3 Events) sont déconseillés au profit des observateurs de mutation (W3C DOM4).
 

Le comportement des événements de modification de propriété est semblable à celui des événements de mutation. Ils entraînent également une baisse des performances en raison du système d’événements de navigateur hérité qu’ils exigent pour fonctionner correctement.

Remarque  L’événement onpropertychange est pris en charge uniquement avec le modèle d’enregistrement d’événement IE attachEvent hérité, qui est déconseillé depuis Windows Internet Explorer 9 (et qui a été supprimé dans IE11) au profit du modèle d’événement de norme W3C « addEventListener ».
 

Identification des événements de mutation

Les événements de mutation, apparus dans Internet Explorer 9, peuvent être facilement identifiés par leur nom, qui est un paramètre de chaîne passé aux API de plateforme addEventListener ou removeEventListener :

  • DOMNodeInserted
  • DOMNodeRemoved
  • DOMSubtreeModified
  • DOMAttrModified
  • DOMCharacterDataModified
Remarque  La norme définit deux événements de mutation supplémentaires qui ne sont pas pris en charge par Internet Explorer : DOMNodeInsertedIntoDocument et DOMNodeRemovedFromDocument.
 

Voici un exemple de l’un de ces événements dans du code JavaScript :


someElement.addEventListener("DOMAttrModified", function() {
  //...
}, false);

Les événements de mutation DOMNodeInserted, DOMNodeRemoved et DOMSubtreeModified surveillent les modifications structurelles apportées aux enfants d’un élément ; soit des éléments sont ajoutés aux enfants de l’élément, soit ils sont supprimés. L’événement DOMSubtreeModified sert pour les deux cas : il est déclenché en cas de suppression et d’ajout. En revanche, il ne contient pas d’informations sur la cause de son déclenchement (il est impossible de distinguer un ajout d’une suppression simplement sur la base de l’événement).

L’événement de mutation DOMAttrModified signale les modifications apportées à la liste d’attributs d’un élément. Cet événement inclut des informations sur les insertions, suppressions ou modifications d’attributs.

L’événement de mutation DOMCharacterDataModified signale les modifications apportées au contenu texte d’un élément. Le contenu texte est groupé en unités logiques appelées nœuds de texte, et seules les modifications apportées à un nœud de texte existant déclenchent l’événement DOMCharacterDataModified. Si de nouveaux nœuds de texte sont insérés ou créés, ils sont plutôt signalés comme des événements DOMNodeInserted.

Trouver des événements de mutation dans votre code devrait être aussi simple qu’utiliser la fonctionnalité de recherche Rechercher dans les fichiers de votre éditeur favori. N’oubliez pas que des variables sont souvent utilisées dans la méthode addEventListener. Vous devez donc rechercher d’abord l’utilisation de chaînes d’événements de mutation (« DOMNodeInserted », « DOMNodeRemoved », et ainsi de suite), puis vérifier toutes les occurrences de addEventListener pour être certain de les avoir toutes trouvées.

Identification des événements de modification de propriété

Les événements de modification de propriété peuvent être identifiés par le nom d’événement onpropertychange, utilisé avec les API d’enregistrement d’événements attachEvent ou detachEvent spécifiques à IE. Recherchez toutes les occurrences de attachEvent et vérifiez si le premier paramètre contient onpropertychange pour repérer ces utilisations dans votre code.

L’événement de modification de propriété est déclenché quand les propriétés d’un élément DOM changent. L’événement n’est pas propagé et est déconseillé depuis Internet Explorer 9 au profit du modèle d’événement de norme W3C « addEventListener ». Il inclut le nom de la propriété qui a changé dans l’accesseur Get des événements propertyName. Malheureusement, pour envoyer un événement de modification de propriété, plusieurs autres attributs d’événements sont également calculés, dont certains forcent le moteur de disposition à recalculer, ce qui affecte sensiblement les performances de toute application utilisant ces événements.

Unlike with mutation events, l’événement de modification de propriété n’offre pas un mappage clair vers les observateurs de mutation. Toutefois, il est possible de remplacer les événements de modification de propriété par des observateurs de mutation si les noms des propriétés concernés sont reflétés dans des attributs HTML. Par exemple, id, qui reflète l’attribut id, style.color, qui est reflété dans l’attribut style sérialisé et className qui correspond à l’attribut class.

Remarque  Pour les propriétés qui ne sont pas reflétées dans les attributs HTML (tels que value sur les éléments input), vos pouvez utiliser la fonctionnalité ECMAScript 5 (JavaScript) appelée defineProperty. Ce document ne décrit pas comment effectuer la migration d’événements de modification de propriété à l’aide de l’API Object.defineProperty JavaScript .
 

Dans quelle mesure les observateurs de mutation diffèrent-ils ?

Les observateurs de mutation ne sont pas basés sur le modèle d’événement de la plateforme Web. Il s’agit d’une différence importante qui leur permet de diffuser beaucoup plus rapidement et sans avoir à propager un événement dans la hiérarchie d’éléments DOM.

De plus, ils sont conçus pour enregistrer plusieurs modifications avant d’informer votre observateur. Ils regroupent les enregistrements de mutation pour éviter de submerger votre application d’événements. Les événements de mutation, quant à eux, sont synchrones et interrompent l’exécution normale du code pour informer votre application des mutations. Malgré le modèle de notification différée employé par les observateurs de mutation, l’observateur de votre application est toujours sûr de recevoir (et d’avoir une chance de traiter) tous les enregistrements de mutation avant le redessin suivant.

Ces deux différences ont un impact sur la façon dont votre application doit être adaptée pour prendre en charge les observateurs de mutation.

Enregistrement des observateurs de mutation

Les observateurs de mutation doivent être créés avant de pouvoir être enregistrés sur un élément donné. Pour créer un observateur de mutation, utilisez l’opérateur JavaScript new et spécifiez une méthode de rappel :


var mutationObserver = new MutationObserver(callback);

Le rappel que vous fournissez au constructeur d’observateur de mutation sera différent de celui que vous utilisez probablement pour vos événements de mutation actuels. Cet aspect sera traité plus en détail plus loin dans cet article.

Après avoir créé l’observateur, vous lui demandez maintenant d’observer un élément particulier. En général, il s’agira de l’élément sur lequel vous enregistriez l’événement de mutation :


mutationObserver.observe(someElement, options);

Si vous n’y enregistrez pas de référence, l’instance de l’observateur de mutation sera conservée en mémoire par la plateforme Web tant qu’elle observe au moins un élément. Si vous n’enregistrez pas de référence à l’observateur, vous pouvez tout de même y faire référence à partir du rappel de l’observateur (il s’agira de l’objet this dans la portée du rappel, ainsi que le second paramètre de la fonction de rappel).

Le paramètre d’options est un simple objet JavaScript avec des propriétés que vous devez fournir pour décrire exactement les genres de mutations que vous souhaitez observer. Les options de propriété correspondent aux trois catégories de mutations mentionnées plus haut :

  • childList
  • attributes
  • characterData

L’option childList avec une valeur true signifie observer les modifications apportées aux éléments enfants de cet élément (suppressions et ajouts). Cette option inclut des nœuds de texte qui sont ajoutés ou supprimés comme enfants de cet élément.

L’option attribute avec une valeur true signifie observer les modifications apportées aux attributs de cet élément (suppressions, ajouts et modifications).

L’option characterData avec une valeur true signifie observer les modifications apportées aux nœuds de texte de cet élément (modifications des valeurs des nœuds de texte, sauf quand les nœuds de texte sont supprimés entièrement ou viennent d’être ajoutés).

Une quatrième option subtree est également importante. Les trois options précédentes (par défaut) observent uniquement leur élément cible de manière isolée, sans prendre en compte ses descendants (sa sous-arborescence). Pour surveiller l’élément donné et tous ses descendants, affectez la valeur true à la propriété subtree. Les événements de mutation ayant la caractéristique d’être propagés dans le modèle DOM, l’utilisation de l’option subtree est requise pour maintenir la parité avec les événements de mutation enregistrés sur des éléments ancêtres.

Le tableau suivant établit la correspondance entre les options d’observateur de mutation et les noms d’événements de mutation :

Événement de mutation Options d’observateur de mutation Remarques
DOMNodeInserted { childList: true, subtree: true } Le rappel doit ignorer manuellement les enregistrements de suppression de nœud
DOMNodeRemoved { childList: true, subtree: true } Le rappel doit ignorer manuellement les enregistrements d’ajout de nœud
DOMSubtreeModified { childList: true, subtree: true } Le rappel peut maintenant effectuer la distinction entre les nœuds ajoutés et supprimés
DOMAttrModified { attributes: true, subtree: true }
DOMCharacterDataModified { characterData: true, subtree: true }

 

Remarque  Avec les observateurs de mutation, il est également possible de combiner plusieurs options pour observer childLists, attributes et characterData en même temps.
 

Pour finir, il existe plusieurs options permettant d’enregistrer les valeurs précédentes d’attributs et les modifications de données de caractères, et d’affiner la portée des attributs qu’il importe d’observer :

  • Les options attributeOldValue et characterDataOldValue avec une valeur true enregistrent la valeur précédente en cas de modification d’attributs ou de characterData.
  • L’option attributeFilter avec un tableau de chaînes de noms d’attributs limite l’observation aux attributs spécifiés. Cette option est pertinente uniquement quand l’option attributes a la valeur true.

Avec ces informations, tout code qui enregistrait auparavant pour un événement de mutation peut être remplacé par du code qui enregistre pour un observateur de mutation :


// Watch for all changes to the body element's children
document.body.addEventListener("DOMNodeInserted", nodeAddedCallback, false);
document.body.addEventListener("DOMNodeRemoved", nodeRemovedCallback, false);


Devient maintenant :


// Watch for all changes to the body element's children
new MutationObserver(nodesAddedAndRemovedCallback).observe(document.body, 
  { childList: true, subtree: true });


Rappels d’observateurs de mutation

La fonction de rappel d’observateur de mutation est appelée avec deux paramètres :

  • Une liste d’enregistrements
  • Une référence à l’objet observateur de mutation qui appelle le rappel

Faites attention si vous réutilisez vos rappels d’événements de mutation pour des observateurs de mutation. Quand une mutation pertinente se produit, le MutationObserver enregistre les informations de modification que vous avez demandées dans un objet MutationRecord et appelle votre fonction de rappel, mais pas avant que tout le script dans la portée actuelle ait été exécuté. Il est possible que plusieurs mutations (chacune représentée par un MutationRecord unique) aient eu lieu depuis le dernier rappel.

Le paramètre records est un tableau JavaScript composé d’objets MutationRecord. Chaque objet du tableau représente une mutation qui a eu lieu sur le ou les éléments observés.

Un enregistrement possède les propriétés suivantes :

Propriété MutationRecord Description

type

Type de mutation consignée par cet enregistrement. Valeurs possibles : attributes, characterData, childList.

target

L’élément sur lequel la mutation a été consignée. Semblable à event.target ou event.srcElement.

addedNodes, removedNodes

Tableau de nœuds qui ont été ajoutés ou supprimés dans le cadre de cette mutation ; ne s’applique que lorsque type a la valeur childList. Ces tableaux peuvent être vides.

previousSibling, nextSibling

Frères suivant et précédent du nœud ajouté ou supprimé ; ne s’applique que lorsque type a la valeur childList. Ces valeurs peuvent être null.

attributeName, attributeNamespace

Nom et espace de noms de l’attribut qui a été ajouté, supprimé ou modifié. La valeur est null si le type d’enregistrement n’est pas attributes.

oldValue

Valeur précédente de l’attribut ou characterData. La valeur peut être null si les options de l’observateur de mutation n’incluaient pas l’indicateur attributeOldValue ou characterDataOldValue ou si type a la valeur childList.

 

 

 

Afficher:
© 2017 Microsoft