Posso trovare eventi associati a un elemento con jQuery?


355

A questo link associo due gestori di eventi:

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

JavaScript:

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

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

C'è un modo per ottenere un elenco di tutti gli eventi associati a un elemento, in questo caso sull'elemento con id="elm"?

Risposte:


517

Nelle versioni moderne di jQuery, useresti il $._datametodo per trovare tutti gli eventi collegati da jQuery all'elemento in questione. Nota , questo è un metodo solo per uso interno:

// 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" );

Il risultato $._datasarà un oggetto che contiene entrambi gli eventi che abbiamo impostato (nella foto sotto con la mouseoutproprietà espansa):

Output della console per $ ._

Quindi in Chrome, è possibile fare clic con il pulsante destro del mouse sulla funzione del gestore e fare clic su "Visualizza definizione funzione" per mostrare il punto esatto in cui è definito nel codice.


59
Questo funziona solo per gli elementi associati agli helper jQuery.
Alex Ciminian,

3
@jammypeach Sto tentando la tua soluzione ma ancora non definito viene restituito per il selettore. Ho usato $ ('# elem'). Bind ('click', function () {}); se ciò farebbe la differenza.
Marcus,

6
@marcus ahhh, guaio, mi sono perso qualcosa, scusa :)$._data(element[0], ‘events’);
totalmenteNotLizards,

16
In questi giorni è necessario utilizzare: $ ._ data ($ ('# foo') [0]) .events
Donald Taylor

5
$._data()viene utilizzato da JQuery interno. $.data()è il metodo pubblico per l'utente. E $.data(element, 'events')funziona benissimo.
slideshowp2

73

Caso generale:

  • Colpire F12 per aprire Dev Tools
  • Clicca il Sources scheda
  • Sul lato destro, scorrere verso il basso fino a Event Listener Breakpoints ed espandere l'albero
  • Fai clic sugli eventi che desideri ascoltare.
  • Interagisci con l'elemento bersaglio, se sparano otterrai un punto di interruzione nel debugger

Allo stesso modo, puoi:

  • tasto destro del mouse sull'elemento target -> seleziona "Inspect element "
  • Scorri verso il basso sul lato destro del riquadro di sviluppo, in basso è "event listeners '.
  • Espandi l'albero per vedere quali eventi sono associati all'elemento. Non sono sicuro che funzioni per eventi gestiti attraverso il gorgoglio (suppongo di no)

3
Sono d'accordo che questo è il metodo preferito ed è una soluzione universale, rispetto a fare affidamento su jQuery, che potrebbe essere o non essere disponibile.
deadbabykitten,

3
@dead umm ... la domanda si riferisce in modo specifico a jQuery e utilizza jQuery nell'allegato di esempio - la risposta dovrebbe essere valida solo nel contesto di jQuery (?)
Codice Jockey

3
È utile comprendere le risposte anche in altri contesti. Solo perché qualcuno fa una domanda specifica non significa che la risposta vincolata che riceveranno è la migliore disponibile. Soprattutto con jQuery, le persone tendono a fare affidamento su di esso come una stampella. Comprendere l'architettura sottostante è importante. Questa risposta mostra che jQuery non è nemmeno necessariamente richiesto. La domanda e l'esempio sono troppo vaghi per conoscerne l'utilizzo e, pertanto, lascia aperta l'interpretazione di ciò che potrebbe essere considerato una risposta valida.
deadbabykitten,

12

Sto aggiungendo questo per i posteri; C'è un modo più semplice che non comporta la scrittura di più JS. Utilizzando l' incredibile addon firebug per firefox ,

  1. Fare clic destro sull'elemento e selezionare 'Ispeziona elemento con Firebug'
  2. Nei pannelli della barra laterale (mostrati nello screenshot), vai alla scheda eventi usando la piccola freccia>
  3. La scheda Eventi mostra gli eventi e le funzioni corrispondenti per ciascun evento
  4. Il testo accanto mostra la posizione della funzione

inserisci qui la descrizione dell'immagine


1
Questo è disponibile anche negli strumenti di sviluppo di IE.
Devlin Carnate,

9

Ora puoi semplicemente ottenere un elenco di listener di eventi associati a un oggetto utilizzando la funzione javascript getEventListeners ().

Ad esempio, digitare quanto segue nella console degli strumenti di sviluppo:

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

4
Penso che non sia una funzione nativa e abbia bisogno del seguente script / dipendenza: github.com/colxi/getEventListeners Questo dovrebbe essere aggiunto alla risposta, in quanto altrimenti fuorviante. Ma grazie per avermi portato a quel 'plugin'; sembra bello. :)
Dennis98,

6

Il plug-in jQuery Audit dovrebbe consentirti di farlo tramite i normali Chrome Dev Tools. Non è perfetto, ma dovrebbe farti vedere il gestore effettivo associato all'elemento / evento e non solo al gestore generico jQuery.


3

Sebbene questo non sia esattamente specifico per i selettori / oggetti jQuery, in FireFox Quantum 58.x, puoi trovare i gestori di eventi su un elemento usando gli strumenti Dev:

  1. Fare clic con il tasto destro del mouse sull'elemento
  2. Nel menu contestuale, fai clic su "Ispeziona elemento"
  3. Se c'è un'icona "ev" accanto all'elemento (riquadro giallo), fai clic sull'icona "ev"
  4. Visualizza tutti gli eventi per quell'elemento e il gestore eventi

FF Quantum Dev Tools


1
risposta fantastica, specialmente lo screenshot rende tutto molto più semplice. Grazie per lo sforzo!
bizi,

2

Ho usato qualcosa del genere se ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... fanno qualcosa, praticamente ricollegano nuovamente i gestori degli eventi} per controllare se il mio elemento è associato a qualsiasi evento. Dirà comunque indefinito (null) se hai rimosso tutti i gestori di eventi da quell'elemento. Questo è il motivo per cui lo sto valutando in un'espressione if.


2

Si noti che è possibile allegare eventi al documento stesso anziché all'elemento in questione. In tal caso, ti consigliamo di utilizzare:

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

E trova l'evento con il selettore corretto :

inserisci qui la descrizione dell'immagine

E poi guarda il gestore > [[FunctionLocation]]

inserisci qui la descrizione dell'immagine


0

Quando passo una piccola query DOM complessa a $ ._ dati come questo: $._data($('#outerWrap .innerWrap ul li:last a'), 'events') genera undefined nella console del browser.

Quindi ho dovuto usare $ ._ dati sul div parent: $._data($('#outerWrap')[0], 'events')per vedere gli eventi per i tag a. Ecco un JSFiddle per lo stesso: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/


3
Il motivo è che stai delegando l'evento da $('#outerWrap'). Gli eventi sono effettivamente legati a quell'elemento piuttosto che alle singole ancore.
Scottux,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.