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?


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


    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


    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.


    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]'));
    Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
    Licensed under cc by-sa 3.0 with attribution required.