Jak wyświetlić zdarzenia uruchomione na elemencie w Chrome DevTools?

Mam konfigurowalny element formularza na stronie z biblioteki. Chcę zobaczyć, jakie zdarzenia JavaScriptu są uruchamiane podczas interakcji z nim, ponieważ próbuję dowiedzieć się, którego programu obsługi zdarzeń użyć.

Jak to zrobić za pomocą Chrome Web Developer?

• Naciśnij, F12aby otworzyć Narzędzia deweloperskie
• Kliknij kartę Źródła
• Po prawej stronie przewiń w dół do „Punktów przerwania detektora zdarzeń” i rozwiń drzewo
• Kliknij wydarzenia, których chcesz słuchać.
• Wejdź w interakcję z elementem docelowym, jeśli wystrzelą, otrzymasz punkt przerwania w debuggerze

Podobnie możesz kliknąć element docelowy prawym przyciskiem myszy -> wybrać „element inspekcji” Przewiń w dół po prawej stronie ramki programisty, na dole znajdują się „detektory zdarzeń”. Rozwiń drzewo, aby zobaczyć, jakie zdarzenia są dołączone do elementu. Nie jestem pewien, czy to działa w przypadku zdarzeń obsługiwanych przez propagację (chyba nie)

Możesz użyć funkcji monitorEvents .

Po prostu sprawdź swój element ( right mouse click→ Inspectna widocznym elemencie lub przejdź do Elementskarty w Narzędziach programisty Chrome i wybierz żądany element), a następnie przejdź do Consolekarty i napisz:

monitorEvents($0)

Teraz, gdy przesuniesz kursor myszy nad tym elementem, skupisz go lub klikniesz, nazwa uruchomionego zdarzenia zostanie wyświetlona z jego danymi.

Aby przestać otrzymywać te dane, po prostu napisz to na konsoli:

unmonitorEvents($0)

$0jest tylko ostatnim elementem DOM wybranym przez Chrome Developer Tools. Możesz przekazać tam dowolny inny obiekt DOM (na przykład wynik getElementByIdlub querySelector).

Możesz również określić „typ” zdarzenia jako drugi parametr, aby zawęzić monitorowane zdarzenia do określonego zestawu. Na przykład:

monitorEvents(document.body, 'mouse')

Lista dostępnych typów znajduje się tutaj .

Zrobiłem mały gif, który ilustruje działanie tej funkcji:

Visual Event to miły, mały bookmarklet, którego można użyć do przeglądania procedur obsługi zdarzeń elementu. W wersji online można obejrzeć tutaj .

W przypadku jQuery (przynajmniej wersja 1.11.2) działała dla mnie następująca procedura.

1. Kliknij element prawym przyciskiem myszy i otwórz „Narzędzia dla programistów Chrome”
2. Wpisz $._data(($0), 'events');w „Konsolę”
3. Rozwiń dołączone obiekty i kliknij dwukrotnie handler:wartość.
4. To pokazuje kod źródłowy dołączonej funkcji, wyszukaj jej część za pomocą zakładki „Wyszukaj”.

I nadszedł czas, aby przestać ponownie wymyślać koło i zacząć używać waniliowych wydarzeń JS ... :)

Nie będzie to pokazywać niestandardowych zdarzeń, takich jak te, które skrypt może utworzyć, jeśli jest to wtyczka jquery. na przykład :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Panel zdarzeń w sekcji Skrypty w narzędziach dla programistów chrome nie wyświetli „Coś: niestandardowe zdarzenie-jeden”