Vedere tutti gli eventi dom per un elemento

Question

Ho un datapicker dell'interfaccia utente jQuery che, quando si fa clic su una data, si cancella l'hash dell'URL su # e non si modifica la data nella casella di testo.

Presumo che ci sia qualche altra utilità JavaScript da qualche parte che ha una sorta di evento delegato che viene anche chiamato, che genera un errore e uccide il gestore jquery.

Come è possibile scorrere e/o vedere tutti gli eventi delegati corrispondono a questo elemento dom.

Answer 1

strumenti di sviluppo di Chrome può aiutare con th è:

1. Point Chrome alla pagina
2. destro del mouse la data nel DatePicker jQuery UI e scegliere "Inspect Element".
3. All'estrema destra, c'è un fisarmonicista con varie cose. Vicino al fondo c'è "ascoltatori di eventi". (Le attuali versioni degli strumenti di sviluppo di Chrome sono molto intelligenti, compresa l'interrogazione della catena di gestione di jQuery.)
4. Espandi l'elemento "Listener di eventi" e vedrai un elenco di eventi collegati relativi a quell'elemento, anche se il gestore non è impostato in modo specifico su elemento. (Ad esempio, se hai fatto questo con il pulsante upvote nella domanda, vedresti che click è agganciato sia per a.vote-up-off sia per document.) Così puoi dare un passaggio a quelle per vedere quali gestori diretti e delegati si riferiscono a quell'evento per quello elemento.

Oltre a ciò, è possibile utilizzare la versione non minificata di jQuery e passare attraverso l'invio dell'evento quando si fa clic sulla data nel DatePicker.

E naturalmente, Gabe's shown come è possibile ottenere i gestori specifici di jQuery tramite i dati jQuery events non documentati. (Questo non ti mostrerà i gestori delegati (a meno che non cammini l'albero genealogico), e non ti mostrerà gestori non jQuery che potrebbero essere allegati, ma è comunque molto utile.)

Answer 2

Con jQuery è possibile visualizzare tutti gli eventi di elementi accedendo alla chiave events dei dati.

jsFiddle

Esempio:

HTML

<input type="text" id="myelement" />​ 

JS

$(function() { 


    var myelement = $('#myelement'); 
    myelement.click(function() { 

     console.log('anonymous event'); 

    }); 

    myelement.click(anotherEvent); 
    myelement.change(anotherEvent); 

    var events = myelement.data('events'); 

    console.log('Number of click events:' + events.click.length); 
    console.log('Number of change events:' + events.change.length); 

}); 

function anotherEvent(){ 
    console.log('another event'); 
}