J'ai un élément de formulaire personnalisable sur une page d'une bibliothèque. Je veux voir quels événements javascript sont déclenchés quand j'interagis avec lui parce que j'essaie de trouver quel gestionnaire d'événement utiliser.
Comment faire cela en utilisant Chrome Web Developer?
De même, vous pouvez faire un clic droit sur l'élément cible -> sélectionnez "inspecter l'élément" Faites défiler vers le bas sur le côté droit du cadre de développement, en bas est "écouteurs d'événements". Développez l'arborescence pour voir quels événements sont attachés à l'élément. Je ne sais pas si cela fonctionne pour les événements qui sont traités par des bulles (je ne devine pas)
Vous pouvez utiliser monitorEvents fonction.
Inspectez simplement votre élément (right mouse click → Inspect sur l'élément visible ou aller à Elements Cliquez sur l'onglet dans les outils de développement Chrome et sélectionnez l'élément souhaité) puis accédez à Console onglet et écrire:
monitorEvents($0)
Maintenant, lorsque vous déplacez la souris sur cet élément, faites la mise au point ou cliquez dessus, le nom de l'événement déclenché sera affiché avec ses données.
Pour ne plus recevoir ces données, écrivez simplement ceci sur la console:
unmonitorEvents($0)
$0 est juste le dernier élément DOM sélectionné par Chrome Developer Tools. Vous pouvez y passer n'importe quel autre objet DOM (par exemple le résultat de getElementById ou querySelector).
Vous pouvez également spécifier l'événement "type" comme second paramètre pour restreindre les événements surveillés à un ensemble prédéfini. Par exemple:
monitorEvents(document.body, 'mouse')
La liste de ces types disponibles est ici.
J'ai fait un petit gif qui illustre comment fonctionne cette fonctionnalité:
Événement visuel est un joli petit bookmarklet que vous pouvez utiliser pour afficher les gestionnaires d'événements d'un élément. Sur la démo en ligne peut être consulté ici.
Pour jQuery (au moins la version 1.11.2), la procédure suivante a fonctionné pour moi.
$._data(($0), 'events'); dans la 'Console'handler: valeur.Et il est temps d'arrêter de réinventer la roue et de commencer à utiliser des événements JS vanille ... :)
Cela ne montrera pas les événements personnalisés comme ceux que votre script pourrait créer s'il s'agit d'un plugin jquery. par exemple :
jQuery(function($){
var ThingName="Something";
$("body a").live('click', function(Event){
var $this = $(Event.target);
$this.trigger(ThingName + ":custom-event-one");
});
$.on(ThingName + ":custom-event-one", function(Event){
console.log(ThingName, "Fired Custom Event: 1", Event);
})
});
Le panneau des événements sous Scripts dans les outils de développement chrome ne vous montrera pas "Quelque chose: custom-event-one"