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

355

Łą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"?

Praveen Prasad
źródło

Odpowiedzi:

517

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ą):

Dane wyjściowe konsoli dla $ ._

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.

Sampson
źródło
59
Działa to tylko w przypadku elementów powiązanych przez pomocniki jQuery.
Alex Ciminian
3
@jammypeach Próbuję rozwiązania, ale wciąż nieokreślony wrócił do selektora. Użyłem $ ('# elem'). Bind ('click', function () {}); gdyby to miało znaczenie.
Marcus
6
@marcus ahhh, woops coś przeoczyłem, przepraszam :)$._data(element[0], ‘events’);
totallyNotLizards
16
W dzisiejszych czasach należy używać: $ ._ data ($ ('# foo') [0]) .events
Donald Taylor
5
$._data()jest używany przez JQuery wewnętrzny. $.data()jest publiczną metodą dla użytkownika. I $.data(element, 'events')działa dobrze.
slideshowp2
73

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)
Vali Shah
źródło
3
Zgadzam się, że jest to preferowana metoda i jest rozwiązaniem uniwersalnym, w przeciwieństwie do polegania na jQuery, która może być dostępna lub nie.
deadbabykitten
3
@dead umm ... pytanie odnosi się konkretnie do jQuery i używa jQuery w przykładowym załączniku - odpowiedź powinna być poprawna tylko w kontekście jQuery (?)
Code Jockey
3
Pomocne jest zrozumienie odpowiedzi również w innych kontekstach. To, że ktoś zadaje określone pytanie, nie oznacza, że ​​ograniczona odpowiedź, którą otrzyma, jest najlepsza z dostępnych. Zwłaszcza w przypadku jQuery ludzie polegają na nim jak na kuli. Ważne jest zrozumienie podstawowej architektury. Ta odpowiedź pokazuje, że jQuery niekoniecznie jest wymagany. Pytanie i przykład są zbyt niejasne, aby znać ich użycie, dlatego pozostawiają otwartą interpretację tego, co można uznać za prawidłową odpowiedź.
deadbabykitten 28.03.16
12

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

wprowadź opis zdjęcia tutaj

kakoma
źródło
1
Jest to również dostępne w narzędziach programistycznych IE.
devlin carnate
9

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);
ScottyG
źródło
4
Myślę, że nie jest to funkcja natywna i wymaga następującego skryptu / zależności: github.com/colxi/getEventListeners. Należy to dodać do odpowiedzi, ponieważ w innym przypadku wprowadza w błąd. Ale dziękuję za doprowadzenie mnie do tej „wtyczki”; Wygląda dobrze. :)
Dennis98
6

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.

JohnK
źródło
3

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ń

FF Quantum Dev Tools

Chris22
źródło
1
niesamowita odpowiedź, zwłaszcza zrzut ekranu znacznie ułatwia. Dziękuję za wysiłek!
bizi
2

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.

Adrian Liew
źródło
2

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 :

wprowadź opis zdjęcia tutaj

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

wprowadź opis zdjęcia tutaj

Pikamander2
źródło
0

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/

giri-jeedigunta
źródło
3
Powodem tego jest delegowanie wydarzenia $('#outerWrap'). Zdarzenia są faktycznie związane z tym elementem, a nie z poszczególnymi kotwicami.
Scottux