Comment savoir quels événements JavaScript ont été déclenchés ?

Question

J'ai une liste de sélection :

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

Lorsque je sélectionne Closed la page se recharge. Dans ce cas, elle affiche les tickets fermés (au lieu des tickets ouverts). Cela fonctionne bien lorsque je le fais manuellement.

Le problème est que la page ne se recharge pas lorsque je sélectionne Closed avec Watir :

browser.select_list(:id => "filter").select "Closed"

Cela signifie généralement qu'un événement JavaScript n'est pas déclenché. Je peux déclencher des événements avec Watir :

browser.select_list(:id => "filter").fire_event "onclick"

mais j'ai besoin de savoir quel événement déclencher.

Existe-t-il un moyen de savoir quels événements sont définis pour un élément ?

Answer 1

J'ai juste pensé que je devais ajouter que vous pouvez faire cela dans Chrome également :

Ctrl + Shift + I (Outils du développeur) > Sources> Points d'arrêt de l'écouteur d'événements (à droite).

Vous pouvez également visualiser tous les événements qui ont déjà été attachés en cliquant simplement avec le bouton droit de la souris sur l'élément, puis en parcourant ses propriétés (le panneau de droite).

Par exemple :

• Cliquez avec le bouton droit de la souris sur le bouton "upvote" à gauche.
• Sélectionner l'élément d'inspection
• Réduire la section des styles (section à l'extrême droite - double chevron)
• Développez l'option des écouteurs d'événements
• Maintenant, vous pouvez voir les événements liés à l'upvote

Je ne sais pas si elle est aussi puissante que l'option firebug, mais elle est suffisante pour la plupart de mes travaux.

Une autre option, un peu différente mais étonnamment géniale, est Visual Event : http://www.sprymedia.co.uk/article/Visual+Event+2

Il met en évidence tous les éléments d'une page qui ont été liés et comporte des popovers montrant les fonctions qui sont appelées. C'est très pratique pour un signet ! Il existe également un plugin pour Chrome, si vous préférez ce type de navigateur.

AnonymeAndrew a également souligné monitorEvents(window); ici

Answer 2

On dirait que Firebug (module complémentaire de Firefox) a la réponse :

• ouvrir Firebug
• cliquez avec le bouton droit de la souris sur l'élément dans l'onglet HTML
• cliquez sur Log Events
• activer l'onglet Console
• cliquez sur Persister dans l'onglet Console (sinon l'onglet Console s'effacera après le rechargement de la page)
• sélectionnez Closed (manuellement)

• il y aura quelque chose comme ceci dans l'onglet Console :

  ...
  mousemove clientX=1097, clientY=292
  popupshowing
  mousedown clientX=1097, clientY=292
  focus
  mouseup clientX=1097, clientY=292
  click clientX=1097, clientY=292
  mousemove clientX=1096, clientY=293
  ...

Fuente: Conseil de Firebug : Enregistrer les événements

Answer 3

En ce qui concerne Chrome, vérifiez la fonction monitorEvents() via l'API de ligne de commande.

• Ouvrez la console via Menu > Outils > Console JavaScript.

• Entrez monitorEvents(window);

• Visualiser la console inondée d'événements

   ...
   mousemove MouseEvent {dataTransfer: ...}
   mouseout MouseEvent {dataTransfer: ...}
   mouseover MouseEvent {dataTransfer: ...}
   change Event {clipboardData: ...}
   ...

Il existe d'autres exemples dans le documentation . Je suppose que cette fonctionnalité a été ajoutée après la réponse précédente.

Answer 4

Vous pouvez utiliser getEventListeners dans votre Console de développement Google Chrome .

getEventListeners(object) renvoie les écouteurs d'événements enregistrés sur l'objet spécifié.

getEventListeners(document.querySelector('option[value=Closed]'));

Answer 5

@Himaas -- Firebug a été remplacé en faveur de Firefox Developer Edition. Si vous l'installez, vous pouvez enregistrer les événements en ouvrant les outils de développement (clic droit > Inspecter), puis en sélectionnant Debugger, et ensuite vers le bas de la page, vous devriez voir "Event Listener Breakpoints" avec une case non cochée appelée "Log". Cochez cette case. Maintenant, tout ce que vous avez à faire est de sélectionner les événements que vous voulez enregistrer dans la liste présentée sous "Event Listener Breakpoints". À partir de là, vous verrez les événements sélectionnés enregistrés dans la console.

Voici une image pour aider à l'illustrer :