Sprawdź dołączone procedury obsługi zdarzeń dla dowolnego elementu DOM

Panel Elements w Google Chrome Developer tools ma to miejsce od wydania Chrome w połowie 2011 roku, a Chrome developer channel od 2010 roku.

Ponadto, detektory zdarzeń wyświetlane dla wybranego węzła są w kolejności, w jakiej są wywoływane przez fazy przechwytywania i bąbelkowania.

Hit polecenie + opcja + i {[10] } na Mac OSX i Ctrl + Shift + i na Windows odpalić to w Chrome

Możesz wyświetlić bezpośrednio dołączone zdarzenia (element.onclick = handler) patrząc na DOM. Możesz przeglądać zdarzenia dołączone do jQuery w Firefoksie za pomocą FireBug z FireQuery. Wygląda na to, że nie ma sposobu, aby zobaczyć zdarzenia dodane przez Addeventlistener przy użyciu FireBug. Można je jednak zobaczyć w Chrome za pomocą debugera Chrome.

Możesz użyć Visual Event autorstwa Allana Jardine ' a, aby sprawdzić wszystkie aktualnie dołączone procedury obsługi zdarzeń z kilku głównych bibliotek JavaScript na twojej stronie. Działa z jQuery, YUI i kilkoma innymi.

Event wizualny jest bookmarklet JavaScript, więc jest kompatybilny ze wszystkimi głównymi przeglądarkami.

Chrome Dev Tools niedawno ogłosił kilka nowych narzędzi do monitorowania zdarzeń JavaScript.

TL; DR

Słuchaj zdarzeń określonego typu za pomocą monitorEvents().

Użyj unmonitorEvents(), aby przestać słuchać.

Get listeners of a DOM element using getEventListeners().

Użyj panelu Inspektora słuchaczy zdarzeń, aby uzyskać informacje o słuchaczach zdarzeń.

Wyszukiwanie Niestandardowych Zdarzeń

Dla mojego need, odkrywając niestandardowe zdarzenia JS w kodzie strony trzeciej, następujące dwie wersje getEventListeners() były niesamowicie pomocne;

• getEventListeners(window)
• getEventListeners(document)

Jeśli wiesz, do którego węzła DOM został dołączony detektor zdarzeń, przekażesz go zamiast window lub document.

Znane Zdarzenie

Jeśli wiesz, jakie zdarzenie chcesz monitorować np. click w treści dokumentu, możesz użyć następującego polecenia: monitorEvents(document.body, 'click');.

Powinieneś teraz zacząć widzieć wszystkie kliknij przycisk zdarzenia, gdy document.body jest zalogowany w konsoli.

Możesz rozszerzyć środowisko javascript, aby śledzić detektory zdarzeń. Zawijanie (lub' przeciążanie') natywnej metody addEventListener () jakimś kodem, który przechowuje zapis każdego dodanego detektora zdarzeń od tego czasu. Musisz również rozszerzyć HTMLElement.prototyp.removeEventListener do przechowywania zapisów, które dokładnie odzwierciedlają to, co dzieje się w DOM.

Tylko dla ilustracji ( nieprzetestowany kod) - oto przykład jak "zawijać" addEventListener aby mieć zapis zarejestrowanych słuchaczy zdarzeń na samym obiekcie:

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}