Posso trovare gli eventi associati a un elemento con jQuery?

Question

mi legano due gestori di eventi su questo link:

<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 legati su un elemento, in questo caso sulla elemento con id="elm"?

Answer 1

Nelle versioni moderne di jQuery, è possibile utilizzare il metodo $._data per trovare gli eventi collegati da jQuery all'elemento in questione. Note, questo è un uso interno unico metodo:

// 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 $._data sarà un oggetto che contiene sia degli eventi che set (foto sotto con la proprietà mouseout espanso):

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

Answer 2

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

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

Answer 3

Il plug-in jQuery Audit plugin dovrebbe consentire di eseguire questa operazione tramite i normali strumenti di Chrome Dev. Non è perfetto, ma dovrebbe consentire di vedere il gestore reale associato all'elemento/evento e non solo al gestore jQuery generico.

Answer 4

Ho usato qualcosa di simile se ($ ._ dati ($ ("a.wine-item-link") [0]). Events == null) {... fai qualcosa, praticamente legano i loro gestori di eventi di nuovo} per verificare se il mio elemento è associato a qualsiasi evento. Continuerà a dire indefinito (null) se hai distaccato tutti i gestori di eventi da quell'elemento. Questo è il motivo per cui sto valutando questo in una espressione se.

Answer 5

• Hit F12 per aprire strumenti di sviluppo
• Clicca Fonti scheda
• Sul lato destro, scorrere verso il basso a "Event Listener Punti di interruzione", ed espandere l'albero
• Clicca sugli eventi che si desidera ascolta. * Interagisci con l'elemento di destinazione, se sparano otterrete un punto di interruzione nel debugger

Allo stesso modo, è possibile fare clic destro sul elemento di destinazione -> selezionare "Inspect Element" Scorrere verso il basso sul lato destro del il frame di sviluppo, in basso è 'ascoltatori di eventi'. Espandi l'albero per vedere quali eventi sono collegati all'elemento. Non sono sicuro se questo funziona per eventi che vengono gestiti tramite bubbling (non sto supponendo)

Answer 6

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

1. Fare clic destro sull'elemento e selezionare 'Ispezionare elemento con Firebug'
2. Nei pannelli della barra laterale (mostrato nello screenshot), passare alla scheda eventi utilizzando la piccola freccia>
3. la scheda eventi mostra gli eventi e le funzioni corrispondenti per ciascun evento
4. il testo vicino ad esso indica la posizione funzione

Answer 7

Mentre questo non è esattamente specifico per jQuery selettori/oggetti, in Firefox 58.x Quantum, è possibile trovare i gestori di eventi su un elemento utilizzando gli strumenti Dev:

1. pulsante destro del mouse l'elemento
2. Nel menu contestuale, fare clic su 'Inspect Element'
3. Se c'è un'icona 'ev' accanto all'elemento (scatola gialla), cliccare sull'icona 'ev'
4. Consente di visualizzare tutti gli eventi per tale elemento ed evento gestore