Wie finde ich heraus, welche JavaScript-Ereignisse ausgelöst wurden?

122

Ich habe eine Auswahlliste:

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

Wenn ich Closeddie Seite neu lade. In diesem Fall werden geschlossene Tickets angezeigt (anstatt geöffnet). Es funktioniert gut, wenn ich es manuell mache.

Das Problem ist, dass die Seite nicht neu geladen wird, wenn ich Closedmit Watir auswähle :

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

Das bedeutet normalerweise, dass ein JavaScript-Ereignis nicht ausgelöst wird. Ich kann Ereignisse mit Watir abfeuern:

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

aber ich muss wissen, welches Ereignis ausgelöst werden soll.

Gibt es eine Möglichkeit herauszufinden, welche Ereignisse für ein Element definiert sind?

javascript events watir dom-events browser-automation Željko Filipin
quelle
Diese Frage listet weitere Tools auf: stackoverflow.com/questions/570960/…
Željko Filipin
2
Visuelles Ereignis, sprymedia.co.uk/article/Visual+Event . Ich bin sicher, dass dies der Hälfte der Leute helfen wird, die auf dieser Stackoverflow-Seite landen :)
Cedric

Antworten:

143

Ich dachte nur, ich würde hinzufügen, dass Sie dies auch in Chrome tun können:

Ctrl+ Shift+ I(Entwicklertools)> Quellen> Ereignis-Listener-Haltepunkte (rechts).

Sie können auch alle Ereignisse anzeigen, die bereits angehängt wurden, indem Sie einfach mit der rechten Maustaste auf das Element klicken und dann dessen Eigenschaften durchsuchen (das Bedienfeld rechts).

Beispielsweise:

  • Klicken Sie mit der rechten Maustaste auf die Upvote-Schaltfläche links
  • Element prüfen
  • Reduzieren Sie den Stilabschnitt (Abschnitt ganz rechts - Doppelsparren)
  • Erweitern Sie die Option Ereignis-Listener
  • Jetzt können Sie die Ereignisse sehen, die an die Gegenstimme gebunden sind

    • Ich bin mir nicht sicher, ob es so mächtig ist wie die Firebug-Option, aber es hat für die meisten meiner Sachen gereicht.

    Eine andere Option, die etwas anders, aber überraschend großartig ist, ist Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2

    Es hebt alle Elemente auf einer Seite hervor, die gebunden wurden, und enthält Popover mit den aufgerufenen Funktionen. Ziemlich geschickt für ein Lesezeichen! Es gibt auch ein Chrome-Plugin, wenn das mehr dein Ding ist - nicht sicher über andere Browser.

    AnonymousAndrew hat auch darauf hingewiesen , hiermonitorEvents(window);

    Chris
    quelle
    2
    Ich konnte nicht herausfinden, wie ich sehen konnte, welche Ereignisse auf eine der von Ihnen vorgeschlagenen Arten ausgelöst wurden.
    Željko Filipin
    1
    Update: Es befindet sich nicht Scriptsin den Entwicklungswerkzeugen (oder im Inspektor), Sie müssen in Sourcesdas Menü auf der rechten Seite gehen und es dann ansehen.
    Aledalgrande
    @aledalgrande Danke, habe aktualisiert. (Für jeden, der liest, gilt dies nur für die erste Lösung, die zweite verwendet immer noch den Inspektor).
    Chris
    1
    Gibt es einen bestimmten Grund, warum Sie den Upvote-Button als Beispiel dafür gewählt haben? : P
    George Dimitriadis
    @ GeorgeDimitriadis haha ​​sprang: P
    Chris
    112

    Es sieht so aus, als hätte Firebug (Firefox-Add-on) die Antwort:

    • Öffne Firebug
    • Klicken Sie mit der rechten Maustaste auf das Element in der Registerkarte HTML
    • klicken Log Events
    • Aktivieren Sie die Registerkarte Konsole
    • Klicken Sie auf der Registerkarte Konsole beibehalten (andernfalls wird die Registerkarte Konsole nach dem erneuten Laden der Seite gelöscht.)
    • auswählen Closed(manuell)

    • Auf der Registerkarte "Konsole" wird Folgendes angezeigt:

      ...
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
...

    Quelle: Firebug Tipp: Ereignisse protokollieren

    Željko Filipin
    quelle
    4
    Vielen Dank, ich wusste nichts über diese Firebug-Funktion. Vielleicht muss ich tatsächlich einige Zeit RTFM.
    Marcel Korpel
    Ich wusste es erst vor ein paar Minuten. Ich schrieb die Frage und fand die Antwort auf dem Weg. :)
    Željko Filipin
    2
    Ein kürzlich veröffentlichter Blogeintrag von
    Firebugs
    1
    Hallo, ich habe versucht, mit der rechten Maustaste auf Firebug zu klicken, aber ich kann die Option "Ereignisse protokollieren" nicht finden. Können Sie mir bitte helfen, wie ich diese finde?
    Rajagopalan
    2
    Hallo, das Firbug Plugin gibt es nicht mehr. Wie soll ich das erreichen? Bitte helfen Sie mir
    HimaaS
    71

    Überprüfen Sie in Bezug auf Chrome die monitorEvents () über die Befehlszeilen-API.

    • Öffnen Sie die Konsole über Menü> Extras> JavaScript-Konsole.
    • Eingeben monitorEvents(window);

    • Zeigen Sie die mit Ereignissen überflutete Konsole an

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

    Es gibt andere Beispiele in der Dokumentation . Ich vermute, diese Funktion wurde nach der vorherigen Antwort hinzugefügt.

    AnonymousAndrew
    quelle
    5
    Nett! In Verbindung mit jQuery:monitorEvents($('#element').get())
    Klaus
    1
    Um die Überwachung zu beenden, verwenden SieunmonitorEvents(window)
    Augustas
    0

    Sie können getEventListeners in Ihrer Google Chrome-Entwicklerkonsole verwenden .

    getEventListeners (Objekt) gibt die für das angegebene Objekt registrierten Ereignis-Listener zurück.

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