Afficher les écouteurs d'événements DOM

L'onglet Événements de l'Explorateur DOM affiche les événements associés à un élément DOM. Chaque nœud supérieur de l'onglet Événements représente un événement contenant des abonnés actifs. Le nœud supérieur contient des sous-nœuds qui représentent les écouteurs d'événements inscrits pour l'événement spécifique. En outre, pour afficher les écouteurs d'événements, vous pouvez utiliser cet onglet pour accéder à l'emplacement de l'écouteur d'événements dans le code JavaScript. Les informations contenues dans cette rubrique s'appliquent aux applications de Store conçues à l'aide de HTML et de JavaScript.

La liste de l'onglet Événements est dynamique. Si vous ajoutez un écouteur d'événements lorsque l'application est en cours d'exécution, le nouvel écouteur apparaît dans la liste. Pour plus d'informations sur l'ajout et la suppression d'écouteurs d'événements, consultez Conseils pour la résolution des problèmes liés aux écouteurs d'événements dans cette rubrique.

Notes

Les écouteurs d'événements des éléments de code qui ne sont pas des éléments DOM, tels que xhr, ne s'affichent pas dans l'onglet Événements.

Afficher les écouteurs d'événements pour les éléments DOM

Cet exemple affiche une application du Windows Phone Store. Les fonctionnalités de l'explorateur DOM décrites ici sont également prises en charge pour les applications du Windows Store.

Pour afficher les écouteurs d'événements

1. Dans Visual Studio, créez une application JavaScript qui utilise le modèle de projet Application Pivot Windows Phone.

2. Une fois le modèle ouvert dans Visual Studio, sélectionnez Emulator 8.1 WVGA 4 pouces 512 Mo dans la liste déroulante de la barre d'outils Déboguer du débogueur :

   

3. Appuyez sur F5 pour exécuter l'application en mode débogage.

4. Dans l'application en cours d'exécution, accédez à l'élément de tableau croisé dynamique Section 3.

5. Passez dans Visual Studio (Alt+Tab ou F12).

6. Dans l'explorateur DOM, sélectionnez Find dans le coin supérieur droit.

7. Tapez ListView, puis appuyez sur Entrée.

8. Si nécessaire, sélectionnez le bouton Suivant pour rechercher l'élément DIV qui représente le contrôle ListView (cet élément a une valeur data-win-control égale à WinJS.UI.ListView).

   L'élément DIV doit maintenant être sélectionné dans l'Explorateur DOM.

9. Sélectionnez l'onglet Événements dans le volet situé à droite de l'explorateur DOM.

   Vous pouvez maintenant voir les événements contenant des abonnés actifs pour l'élément DIV, comme illustré ici.

   

10. Pour localiser les écouteurs de ces événements, sélectionnez les liens associés du fichier JavaScript.

11. Pour identifier rapidement les écouteurs d'événement des éléments parents dans la hiérarchie DOM, sélectionnez un élément parent dans la liste hiérarchique en bas de l'explorateur DOM.

    

    L'onglet Événements affiche les écouteurs d'événements pour tout élément que vous sélectionnez dans la liste hiérarchique.

Conseils pour la résolution des problèmes liés aux écouteurs d'événements

Dans certains scénarios d'application, les écouteurs d'événements doivent être explicitement supprimés à l'aide de removeEventListener. Utilisez l'onglet Événements de l'explorateur DOM pour tester si les écouteurs d'événements ont été supprimés des éléments DOM lors de l'exécution du code. Voici quelques conseils qui vous aideront à résoudre ces types de problèmes :

• Pour les applications qui utilisent le modèle de navigation à une seule page implémenté dans les modèles de projet Visual Studio, il n'est généralement pas nécessaire de supprimer les écouteurs d'événements inscrits pour les objets, tels que les éléments DOM, faisant partie d'une page. Dans ce scénario, un élément DOM et ses écouteurs d'événements associés ont la même durée de vie et peuvent être récupérés par le garbage collector.

• Si la durée de vie de l'objet ou de l'élément DOM est différente de l'écouteur d'événements associé, il se peut que vous deviez appeler la méthode removeEventListener. Par exemple, si vous utilisez l'événement window.onresize, vous devrez peut-être supprimer l'écouteur d'événements si vous quittez la page où vous gérez l'événement.

• Si removeEventListener ne réussit pas à supprimer l'écouteur spécifié, il se peut qu'il soit appelé sur une autre instance de l'objet. Vous pouvez utiliser la méthode bind, méthode (Function) (JavaScript) pour résoudre ce problème lorsque vous ajoutez l'écouteur.

• Pour supprimer un écouteur d'événements ajouté en utilisant bind, méthode (Function) (JavaScript) ou une fonction anonyme, stockez une instance de la fonction lorsque vous ajoutez l'écouteur. Voici une seule façon d'utiliser ce modèle sans risque :

  // You could use the following code within the constructor function of an object, or
  // in the ready function of a PageControl object (Store app).
  this.storedHandler = this._handlerFunc.bind(this);
  elem.addEventListener('mouseup', this.storedHandler);
  
  // In this example, add the following code in the PageControl object's unload function.
  elem.removeEventListener('mouseup', this.storedHandler);
  

  Si vous utilisez le code suivant au lieu de stocker une référence à la fonction liée, vous ne pourrez pas supprimer l'écouteur d'événements explicitement :

  // Avoid this pattern. No reference to the bound function is available.
  elem.addEventListener('mouseup', this._handlerFunc.bind(this));
  

• Vous ne pouvez pas supprimer un écouteur d'événements en utilisant removeEventListener si vous l'avez ajouté à l'aide de l'attribut obj.on<eventname>, tel que window.onresize = handlerFunc.

• Utilisez l'analyseur de mémoire JavaScript pour Analyser l'utilisation de la mémoire (JavaScript) dans votre application. Les écouteurs d'événements qui doivent être explicitement supprimés peuvent apparaître comme une fuite de mémoire.

Voir aussi

Concepts

Démarrage rapide : déboguer du code HTML et CSS

Déboguer les styles CSS avec l'Explorateur DOM

Déboguer la disposition avec l'Explorateur DOM