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

Pod tym linkiem zwiÄ ... zujÄ ™ dwa programy obsĹ 'ugi zdarzeĺ": 

<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, aby uzyskać listę wszystkich zdarzeń związanych z elementem, w tym przypadku na elemencie z id="elm"?

Author: Crescent Fresh, 2010-01-05
Source

9 answers

W nowoczesnych wersjach jQuery, można użyć metody $._data, aby znaleźć wszelkie zdarzenia dołączone przez jQuery do danego elementu. Uwaga, jest to metoda tylko 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" );

Wynik z $._data będzie obiektem, który zawiera oba ustawione zdarzenia (Na zdjęciu poniżej z właściwością mouseout rozszerzoną):

Wyjście konsoli za $._

Następnie w Chrome możesz kliknąć prawym przyciskiem myszy funkcję obsługi i kliknąć "Zobacz definicję funkcji", aby pokazać dokładne miejsce, w którym jest zdefiniowany w Twoim kodzie.

 479
Author: Sampson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-20 11:07:19

Przypadek ogólny:

  • Naciśnij F12 , aby otworzyć Narzędzia Dev
  • Kliknij kartę Sources
  • po prawej stronie przewiń w dół do Event Listener Breakpoints i rozwiń drzewo
  • Kliknij na wydarzenia, których chcesz słuchać.
  • interakcja z elementem docelowym, jeśli wystrzelisz, otrzymasz punkt przerwania w debuggerze

Podobnie można:

  • Kliknij prawym przyciskiem myszy na element docelowy - > Wybierz "Inspect element"
  • przewiń w dół po prawej stronie dev frame, na dole jest 'event listeners'.
  • rozwiń drzewo, aby zobaczyć, jakie zdarzenia są dołączone do elementu. Nie wiem, czy to działa dla zdarzeń, które są obsługiwane przez bubbling (zgaduję, że nie)
 63
Author: Vali Shah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-15 15:57:13

Dodaję to dla potomności; jest łatwiejszy sposób, który nie wymaga pisania więcej JS. Korzystanie z amazing firebug addon for firefox ,

  1. Kliknij prawym przyciskiem myszy na elemencie i wybierz "Inspect element with Firebug"
  2. w panelach paska bocznego (pokazanych na zrzucie ekranu) przejdź do karty zdarzenia za pomocą strzałki tiny>
  3. zakładka Zdarzenia pokazuje zdarzenia i odpowiadające im funkcje dla każdego zdarzenia
  4. tekst obok pokazuje funkcję lokalizacja

Tutaj wpisz opis obrazka

 11
Author: kakoma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-22 17:03:06

Wtyczka jQuery Audit plugin powinna pozwolić ci to zrobić poprzez zwykłe narzędzia programistyczne Chrome. To nie jest idealne, ale powinno pozwolić Ci zobaczyć rzeczywisty handler związany z elementem / eventem, a nie tylko ogólny handler jQuery.

 6
Author: JohnK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-26 14:08:22

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

 2
Author: Adrian Liew,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-31 22:56:17

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

  1. Kliknij prawym przyciskiem myszy element
  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 obsługi zdarzeń

FF Quantum Dev Tools

 2
Author: Chris22,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-26 22:15:35

Możesz teraz po prostu uzyskać listę słuchaczy zdarzeń powiązanych z obiektem za pomocą funkcji javascript getEventListeners ().

Na przykład wpisz następujący tekst w konsoli dev tools: 

// Get all event listners bound to the document object
getEventListeners(document);
 2
Author: ScottyG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-12 17:23:56

Kiedy przekazuję trochę złożone zapytanie DOM do $._data w ten sposób: $._data($('#outerWrap .innerWrap ul li:last a'), 'events') wyrzuca undefined w konsoli przeglądarki.

Więc musiałem użyć $._data na rodzicu div: $._data($('#outerWrap')[0], 'events') aby zobaczyć zdarzenia dla znaczników a. Oto JSFiddle dla tego samego: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/
 0
Author: giri-jeedigunta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-14 07:49:03

Zauważ, ż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ź Zdarzenie za pomocą właściwego selektora :

Tutaj wpisz opis obrazka

A następnie spójrz na > [[FunctionLocation]]

Tutaj wpisz opis obrazka

 0
Author: Pikamander2,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-20 02:10:22