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

122

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?

javascript events watir dom-events browser-automation Željko Filipin
la source
Cette question répertorie plus d'outils: stackoverflow.com/questions/570960/…
Željko Filipin
2
Événement visuel, sprymedia.co.uk/article/Visual+Event . Je suis sûr que cela aidera la moitié des personnes qui atterrissent sur cette page stackoverflow :)
Cedric

Réponses:

143

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:

  • Faites un clic droit sur le bouton de vote positif à gauche
  • Sélectionnez un é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
  • Vous pouvez maintenant voir les événements liés au vote positif

    • 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);

    Chris
    la source
    2
    Je ne pouvais pas comprendre comment voir quels événements ont déclenché l'une ou l'autre des manières que vous avez suggérées.
    Željko Filipin
    1
    Mise à jour: ce n'est pas Scriptsà l'intérieur des outils de développement (ou de l'inspecteur), il faut aller dans Sourcespuis regarder le menu de droite.
    aledalgrande
    @aledalgrande Merci, ont mis à jour. (Pour tous ceux qui lisent, cela ne s'applique qu'à la première solution, la seconde utilise toujours l'inspecteur).
    Chris
    1
    Y a-t-il une raison spécifique pour laquelle vous avez choisi le bouton de vote positif comme exemple pour cela? : P
    George Dimitriadis
    @GeorgeDimitriadis haha ​​sprung: P
    Chris
    112

    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

    Željko Filipin
    la source
    4
    Merci beaucoup, je ne connaissais pas cette fonctionnalité Firebug. Peut-être que j'ai besoin de RTFM un certain temps.
    Marcel Korpel
    Je n'en savais rien jusqu'à il y a quelques minutes. J'écrivais la question et j'ai trouvé la réponse en cours de route. :)
    Željko Filipin
    2
    Une entrée de blog récente du développeur de Firebug: softwareishard.com/blog/firebug/firebug-tip-log-dom-events
    jakub.g
    1
    Bonjour, j'ai essayé un clic droit sur firebug mais je ne trouve pas l'option Journaliser les événements, pouvez-vous s'il vous plaît m'aider à trouver celui-ci?
    Rajagopalan
    2
    Salut, le plugin Firbug n'est plus. Alors, comment dois-je y parvenir? S'il vous plaît, aidez-moi
    HimaaS
    71

    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.

    AnonymeAndrew
    la source
    5
    Agréable! En conjonction avec jQuery:monitorEvents($('#element').get())
    Klaus
    1
    Pour arrêter l'utilisation de la surveillanceunmonitorEvents(window)
    Augustas
    0

    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]'));
    JSON C11
    la source