Posso trovare eventi associati a un elemento con jQuery?

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

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

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.

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)

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

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

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.

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

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.

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 :

E poi guarda il gestore > [[FunctionLocation]]

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/