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

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 Closedla page se recharge. Dans ce cas, il affiche les tickets fermés (au lieu d'ouvrir). Cela fonctionne bien lorsque je le fais manuellement.

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

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

Cela signifie généralement que certains événements JavaScript ne sont pas déclenchés. 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?

Je pensais juste que j'ajouterais que vous pouvez également le faire dans Chrome:

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

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

Par exemple:

Je ne sais pas si c'est aussi puissant que l'option firebug, mais cela a suffi pour la plupart de mes trucs.

L'événement visuel est une autre option un peu différente mais étonnamment impressionnante: 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 fenêtres contextuelles affichant les fonctions appelées. Assez chouette pour un signet! Il existe également un plugin Chrome si c'est plus votre truc - pas sûr des autres navigateurs.

AnonymousAndrew a également souligné icimonitorEvents(window);

On dirait que Firebug (add-on Firefox) a la réponse:

• ouvrir Firebug
• faites un clic droit sur l'élément dans l'onglet HTML
• Cliquez sur Log Events
• activer l'onglet Console
• cliquez sur l'onglet Persist in Console (sinon l'onglet Console sera effacé après le rechargement de la page)
• sélectionner Closed(manuellement)

• il y aura quelque chose comme ça 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
  ...

Source: Astuce Firebug: Journaliser les événements

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

• Ouvrez la console via Menu> Outils> Console JavaScript.
• Entrer monitorEvents(window);

• Voir 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 la documentation . Je suppose que cette fonctionnalité a été ajoutée après la réponse précédente.

Vous pouvez utiliser getEventListeners dans votre console développeur Google Chrome .

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

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