Jak sprawdzić, które zdarzenia JavaScript zostały uruchomione?

123

Mam listę wyboru:

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

Kiedy wybieram, Closedstrona ładuje się ponownie. W tym przypadku pokazuje zamknięte bilety (zamiast otwartych). Działa dobrze, gdy robię to ręcznie.

Problem polega na tym, że strona nie ładuje się ponownie, gdy wybieram Closedz Watir :

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

Zwykle oznacza to, że jakieś zdarzenie JavaScript nie jest uruchamiane. Mogę odpalać wydarzenia z Watirem:

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

ale muszę wiedzieć, które zdarzenie odpalić.

Czy istnieje sposób, aby dowiedzieć się, które zdarzenia są zdefiniowane dla elementu?

javascript events watir dom-events browser-automation Željko Filipin
źródło
To pytanie zawiera listę innych narzędzi: stackoverflow.com/questions/570960/ ...
Željko Filipin
2
Wydarzenie wizualne, sprymedia.co.uk/article/Visual+Event . Jestem pewien, że pomoże to połowie ludzi wylądować na tej stronie stackoverflow :)
Cedric

Odpowiedzi:

144

Pomyślałem, że dodam, że możesz to zrobić również w Chrome:

Ctrl+ Shift+ I(Narzędzia deweloperskie)> Źródła> Punkty przerwania nasłuchiwania zdarzeń (po prawej).

Możesz również wyświetlić wszystkie zdarzenia, które zostały już dołączone, po prostu klikając prawym przyciskiem myszy element, a następnie przeglądając jego właściwości (panel po prawej stronie).

Na przykład:

  • Kliknij prawym przyciskiem myszy przycisk głosowania po lewej stronie
  • Wybierz element inspekcji
  • Zwiń sekcję stylów (sekcja po prawej stronie - podwójna szewron)
  • Rozwiń opcję nasłuchiwania zdarzeń
  • Teraz możesz zobaczyć wydarzenia powiązane z głosowaniem za

    • Nie jestem pewien, czy jest tak potężny jak opcja firebug, ale wystarczył do większości moich rzeczy.

    Inną opcją, która jest nieco inna, ale zaskakująco niesamowita, jest wydarzenie wizualne: http://www.sprymedia.co.uk/article/Visual+Event+2

    Podświetla wszystkie elementy na stronie, które zostały powiązane, i zawiera wyskakujące okienka pokazujące wywoływane funkcje. Całkiem fajnie jak na zakładkę! Jest też wtyczka do Chrome, jeśli to bardziej lubisz - nie jestem pewien co do innych przeglądarek.

    Anonimowy Andrew również zwrócił tutaj uwagęmonitorEvents(window);

    Chris
    źródło
    2
    Nie mogłem dowiedzieć się, jak sprawdzić, które zdarzenia wywołały jeden z sugerowanych przez ciebie sposobów.
    Željko Filipin
    1
    Aktualizacja: nie ma jej Scriptsw narzędziach deweloperskich (lub inspektorze), musisz wejść do, Sourcesa następnie spojrzeć na menu po prawej stronie.
    aledalgrande
    @aledalgrande Thanks, aktualizacja. (Dla każdego, kto czyta, dotyczy to tylko pierwszego rozwiązania, drugie nadal korzysta z inspektora).
    Chris
    1
    Czy jest jakiś konkretny powód, dla którego wybrałeś przycisk „za” jako przykład? : P
    George Dimitriadis
    @GeorgeDimitriadis haha ​​sprung: P
    Chris
    112

    Wygląda na to, że Firebug (dodatek do Firefoksa) ma odpowiedź:

    • otwórz Firebug
    • kliknij prawym przyciskiem myszy element w zakładce HTML
    • Kliknij Log Events
    • włącz kartę Konsola
    • kliknij opcję Utrwal na karcie Konsola (w przeciwnym razie karta Konsola zostanie wyczyszczona po ponownym załadowaniu strony)
    • wybierz Closed(ręcznie)

    • będzie coś takiego w zakładce 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
...

    Źródło: Firebug Wskazówka: rejestruj zdarzenia

    Željko Filipin
    źródło
    4
    Wielkie dzięki, nie wiedziałem o tej funkcji Firebug. Być może potrzebuję trochę czasu na RTFM.
    Marcel Korpel
    Nie wiedziałem o tym dopiero kilka minut temu. Pisałem pytanie i po drodze znalazłem odpowiedź. :)
    Željko Filipin
    2
    Niedawny wpis na blogu dewelopera
    Firebuga
    1
    Cześć, próbowałem kliknąć prawym przyciskiem myszy na firebuga, ale nie mogę znaleźć opcji Rejestruj zdarzenia, czy możesz mi pomóc, jak znaleźć to?
    Rajagopalan
    2
    Cześć, wtyczka Firbug już nie istnieje. Więc jak mam to osiągnąć? Proszę mi pomóc
    HimaaS
    71

    Jeśli chodzi o Chrome, sprawdź monitorEvents () za pomocą interfejsu API wiersza poleceń.

    • Otwórz konsolę poprzez Menu> Narzędzia> Konsola JavaScript.
    • Wchodzić monitorEvents(window);

    • Zobacz konsolę zalaną zdarzeniami

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

    Są też inne przykłady w dokumentacji . Zgaduję, że ta funkcja została dodana po poprzedniej odpowiedzi.

    Anonimowy Andrzej
    źródło
    5
    Miły! W połączeniu z jQuery:monitorEvents($('#element').get())
    Klaus
    1
    Aby przestać monitorować użycieunmonitorEvents(window)
    Augustas
    0

    Możesz użyć getEventListeners w konsoli programisty Google Chrome .

    getEventListeners (obiekt) zwraca detektory zdarzeń zarejestrowane w określonym obiekcie.

    getEventListeners(document.querySelector('option[value=Closed]'));
    JSON C11
    źródło