Czy mogę znaleźć zdarzenia powiązane z elementem za pomocą jQuery?

Łączę dwa moduły obsługi zdarzeń za pomocą tego łącza:

<a href='#' id='elm'>Show Alert</a>

JavaScript:

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

Czy jest jakiś sposób na uzyskanie listy wszystkich zdarzeń powiązanych z elementem, w tym przypadku z elementem id="elm"?

W nowoczesnych wersjach jQuery można by użyć tej $._datametody, aby znaleźć zdarzenia dołączone przez jQuery do danego elementu. Uwaga: jest to metoda wyłącznie do użytku wewnętrznego:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

Wynikiem $._databędzie obiekt, który zawiera oba ustawione przez nas zdarzenia (na zdjęciu poniżej z mouseoutrozwiniętą właściwością):

Następnie w Chrome możesz kliknąć prawym przyciskiem myszy funkcję obsługi i kliknąć „zobacz definicję funkcji”, aby wyświetlić dokładne miejsce, w którym jest ona zdefiniowana w kodzie.

Ogólna sprawa:

• Naciśnij, F12aby otworzyć Narzędzia deweloperskie
• Kliknij Sourceszakładkę
• Po prawej stronie przewiń w dół Event Listener Breakpointsi 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:

• kliknij prawym przyciskiem element docelowy -> wybierz „ Inspect element”
• Przewiń w dół po prawej stronie ramy programisty, na dole jest „ event listeners”.
• 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)

Dodaję to dla potomności; Jest prostszy sposób, który nie wymaga pisania więcej JS. Używając niesamowitego dodatku Firebug dla Firefoxa ,

1. Kliknij element prawym przyciskiem myszy i wybierz opcję „Sprawdź element za pomocą Firebug”
2. W panelach paska bocznego (pokazanych na zrzucie ekranu) przejdź do karty zdarzeń za pomocą małej> strzałki
3. Karta zdarzeń pokazuje zdarzenia i odpowiadające im funkcje dla każdego zdarzenia
4. Tekst obok pokazuje lokalizację funkcji

Teraz możesz po prostu uzyskać listę detektorów zdarzeń powiązanych z obiektem za pomocą funkcji javascript getEventListeners ().

Na przykład wpisz następujące polecenie w konsoli narzędzi programistycznych:

// Get all event listners bound to the document object
getEventListeners(document);

JQuery Audytu plugin Wtyczka powinna pozwolić to zrobić poprzez normalne Chrome Dev Tools. Nie jest doskonały, ale powinien pozwalać zobaczyć rzeczywisty moduł obsługi związany z elementem / zdarzeniem, a nie tylko ogólny moduł obsługi jQuery.

Chociaż nie jest to specyficzne dla selektorów / obiektów jQuery, w FireFox Quantum 58.x można znaleźć procedury obsługi zdarzeń na elemencie za pomocą narzędzi programistycznych:

1. Kliknij element prawym przyciskiem myszy
2. W menu kontekstowym kliknij „Sprawdź element”
3. Jeśli obok elementu znajduje się ikona „ev” (żółte pole), kliknij ikonę „ev”
4. Wyświetla wszystkie zdarzenia dla tego elementu i modułu obsługi zdarzeń

Użyłem czegoś takiego, jeśli ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... zrób coś, prawie ponownie powiązaj ich procedury obsługi zdarzeń}, aby sprawdzić jeśli mój element jest powiązany z jakimkolwiek zdarzeniem. Nadal powie, niezdefiniowane (null), jeśli odłączyłeś wszystkie procedury obsługi zdarzeń od tego elementu. To jest powód, dla którego oceniam to w wyrażeniu if.

Pamiętaj, że zdarzenia mogą być dołączane do samego dokumentu, a nie do danego elementu. W takim przypadku będziesz chciał użyć:

$._data( $(document)[0], "events" );

I znajdź wydarzenie za pomocą odpowiedniego selektora :

A potem spójrz na moduł obsługi > [[FunctionLocation]]

Gdy przekazuję trochę skomplikowane zapytanie DOM do danych $ ._ w ten sposób: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')rzuca niezdefiniowane w konsoli przeglądarki.

Musiałem więc użyć danych $ ._ na nadrzędnym div: $._data($('#outerWrap')[0], 'events')aby zobaczyć zdarzenia dla tagów a. Oto JSFiddle dla tego samego: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/