web-dev-qa-db-fra.com

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>

Quand je sélectionne Closed la page se recharge. Dans ce cas, les tickets fermés sont affichés (au lieu d’être ouverts). Cela fonctionne bien quand 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 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 tirer.

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

javascripteventswatirdom-eventsbrowser-automation
113
Željko Filipin

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

  • firebug ouvert
  • clic droit 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 une fois la page rechargée).
  • sélectionnez 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: Journal des événements

111
Željko Filipin

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

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

Vous pouvez également afficher tous les événements déjà 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:

  • Faites un clic droit sur le bouton d'upvote à gauche
  • Sélectionner un élément à inspecter
  • Réduire la section des styles (section à l'extrême droite - double chevron)
  • Développer l'option d'écoute d'événement
  • Maintenant, vous pouvez voir les événements liés au vote vers le haut

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

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

    Il met en surbrillance tous les éléments d'une page qui ont été liés et affiche des survols indiquant les fonctions appelées. Assez chouette pour un marque-page! Il existe également un plug-in Chrome si cela vous intéresse davantage - vous n’êtes pas sûr des autres navigateurs.

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

    130
    Chris

    En ce qui concerne Chrome, consultez monitorEvents () via l’API de ligne de commande.

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

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

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

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

    66
    AnonymousAndrew

    Vous pouvez utiliser getEventListeners dans votre Google Chrome pour les développeurs .

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

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