Sprawdź dołączone programy obsługi zdarzeń pod kątem dowolnego elementu DOM

Czy istnieje sposób, aby zobaczyć, jakie funkcje / kod są dołączone do dowolnego zdarzenia elementu DOM? Korzystanie z Firebuga lub innego narzędzia.

Procedury obsługi zdarzeń dołączone przy użyciu tradycyjnego element.onclick= handlerlub HTML <element onclick="handler">można pobrać w prosty sposób z element.onclickwłaściwości ze skryptu lub w debugerze.

Programy obsługi zdarzeń dołączone przy użyciu metod DOM Level 2 Events addEventListeneri IE attachEventnie mogą być obecnie w ogóle pobierane ze skryptu. DOM Level 3 zaproponowano kiedyś, element.eventListenerListaby uzyskać dostęp do wszystkich słuchaczy, ale nie jest jasne, czy pozwoli to osiągnąć ostateczną specyfikację. Obecnie nie ma implementacji w żadnej przeglądarce.

Narzędzie do debugowania jako rozszerzenie przeglądarki może uzyskać dostęp do tego rodzaju słuchaczy, ale nie wiem, czy w rzeczywistości ma to miejsce.

Niektóre frameworki JS pozostawiają wystarczająco dużo zapisów powiązań zdarzeń, aby dowiedzieć się, co robili. Visual Event wykorzystuje to podejście do wykrywania słuchaczy zarejestrowanych za pomocą kilku popularnych frameworków.

Elementów płytowych w narzędziach Google Chrome Developer miał to od wydań Chrome w połowie 2011 roku i Chrome wydaniach kanale deweloperskim od 2010 roku.

Ponadto detektory zdarzeń pokazane dla wybranego węzła są w kolejności, w jakiej są uruchamiane w fazie przechwytywania i propagacji.

Naciśnij command+ option+ iw systemie Mac OSX i Ctrl+ Shift+ iw systemie Windows, aby uruchomić to w Chrome

Narzędzia deweloperskie Chrome niedawno ogłosiły wprowadzenie nowych narzędzi do monitorowania zdarzeń JavaScript .

TL; DR

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

Służy unmonitorEvents()do przerywania słuchania.

Zdobądź odbiorców elementu DOM za pomocą getEventListeners().

Użyj panelu Inspektor nasłuchiwania zdarzeń, aby uzyskać informacje o odbiornikach zdarzeń.

Znajdowanie zdarzeń niestandardowych

Na moją potrzebę, odkrywając niestandardowe zdarzenia JS w kodzie strony trzeciej, poniższe dwie wersje getEventListeners()były niezwykle pomocne;

• getEventListeners(window)
• getEventListeners(document)

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

Znane wydarzenie

Jeśli wiesz, co wydarzenie chcesz monitorować np clickna ciele dokumentu można użyć następujących: monitorEvents(document.body, 'click');.

Powinieneś teraz zacząć widzieć wszystkie zdarzenia kliknięcia na document.bodyzalogowanym w konsoli.

Możesz przeglądać 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 za pomocą FireBug. Możesz 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 programy obsługi zdarzeń z kilku głównych bibliotek JavaScript na twojej stronie. Działa z jQuery, YUI i kilkoma innymi.

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

Możesz rozszerzyć swoje środowisko javascript, aby śledzić detektory zdarzeń. Otocz (lub „przeciąż”) natywną metodę addEventListener () jakimś kodem, który może przechowywać zapis każdego detektora zdarzeń dodanego od tego momentu . Musiałbyś również rozszerzyć HTMLElement.prototype.removeEventListener, aby przechowywać rekordy, które dokładnie odzwierciedlają to, co dzieje się w DOM.

Dla ilustracji (nieprzetestowany kod) - to jest przykład tego, jak można `` opakować '' addEventListener, aby zapisy zarejestrowanych detektorów zdarzeń znajdowały się 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);
}