Come posso vedere l'evento che è collegato ad un elemento html?

Question

Ciao, sono un nuovo programmatore e sto ancora imparando. Questo è il codice che sto cercando di capire:

<div id="buy" class="buy button">Buy</div> 

Quando clicco sul div (pulsante), un po 'di codice javascript viene eseguito, ma non so erano lo è. Come posso sapere quale funzione viene attivata quando si verifica un clic? Alcuni come un ascoltatore è allegato alla presente elemento

Answer 1

Se si utilizza Firefox e Firebug, è possibile provare a installare FireQuery. Lo farà in modo che tu possa vedere i gestori legati da jQuery. http://firequery.binaryage.com/

Answer 2

Usa jQuery("#buy").data('events');

http://api.jquery.com/jQuery.data/ può essere interessante.

Answer 3

Stai usando jQuery? Se è così, si desidera cercare una di queste tre righe di codice:

$("#buy").click //the div is refered by its id 

o

$(".buy").click //the div is refered to by the style "buy" 

o

$(".button").click //refered to by the style "button" 

maggior parte dei browser più recenti hanno "Developer Tools" integrato al loro interno premendo F12 (almeno in IE e Chrome). Questo potrebbe aiutarti a eseguire ulteriori debug e tracing.

Answer 4

I gestori di eventi collegati mediante tradizionale element.onclick= gestore o HTML <element onclick="handler"> può essere recuperato banalmente dalla proprietà element.onclick da script o in-debugger.

Gestori di eventi collegati utilizzando i metodi add-Event di DOM Level 2 addEventListener e al momento non è possibile richiamare attachEvent di IE dallo script. DOM Level 3 una volta proposto element.eventListenerList per ottenere tutti gli ascoltatori, ma non è chiaro se questo farà riferimento alla specifica finale. Non c'è implementazione in nessun browser oggi.

Answer 5

Non è possibile farlo in un modo molto buono "semplicemente" utilizzando ECMAscript stesso. Per esempio, se ci fosse un gestore di eventi click aggiunto da DOM Level 1 sotto forma di

document.getElementById('buy').onclick = function() {}; 

si può ovviamente facilmente intercettare quella proprietà sul nodo stesso. Le cose si complicano se DOM Livello 2 entra in gioco con .addEventListener() rispettando lo .attachEvent(). Ora non hai davvero un "luogo" dove cercare dove si trovano tutte le diverse funzioni dell'ascoltatore.

Migliora usando jQuery. jQuery manterrà tutte le sue funzioni del gestore di eventi in un oggetto speciale che è collegato al nodo DOM di invocazione. È possibile verificare la presenza di che ottenendo la -expando proprietà .data() per un nodo come

$('#buy').data('events'); 

Tuttavia, ora ho già descritto tre modi diversi di listener di eventi di legame ad un nodo (in realtà la sua due perché una libreria come jQuery inoltre usa Metodi DOM Level 1 o 2 ovviamente).

Diventa davvero brutto se un evento viene attivato per delega. Ciò significa che abbiamo limitato il nostro evento click su qualche nodo genitore aspettando solo l'evento che ci ha fatto ribollire, così possiamo controllare lo target. Quindi ora non abbiamo nemmeno una relazione diretta tra node e event listener.

Conclusione: ecco un plug-in del browser o probabilmente una cosa come VisualEvent.

Answer 6

Se si utilizza FireFox, è necessario installare FireBug. Dopo averlo installato, puoi installare FireQuery, che ti mostrerà quali eventi jQuery sono associati a quali oggetti.

http://getfirebug.com/

http://firequery.binaryage.com/

Answer 7

1. destro del mouse la pagina, e scegliere di visualizzare il codice sorgente della pagina
2. Trova <script> tag
3. Cercare $("#buy") e qualcosa di nota onClick o .on("click",function(){...});
4. Se non riesci a trovarlo, cerca qualcosa lungo t Linee ueste: document.getElementById("buy")
5. avete trovato il function, o il codice, in cui il codice del gestore eventi è

$("#buy") è il modo di JQuery di dire trovare un elemento che ha un attributo id di buy e se ha un . seguendolo con qualche funzione, quella funzione agisce sull'elemento trovato da JQuery.

Answer 8

Di seguito è qualcosa che ho usato in passato che penso possa essere quello che stai cercando. Ciò che fa è guardare una proprietà su un elemento della pagina (nell'esempio seguente, è la proprietà "Titolo" del documento) e quindi visualizzare un avviso con il callstack JS ogni volta che tale proprietà viene modificata. Dovrai inserirlo nel DOM prima di qualunque codice tu stia cercando di trovare gli incendi, ma spero che sarai in grado di identificare qual è la causa del problema.

Si consiglia di utilizzare Firefox e ottenere Firebug per il debug di JavaScript.

// Call stack code 
function showCallStack() { 
    var f=showCallStack,result="Call stack:\n"; 

    while((f=f.caller)!==null) { 
     var sFunctionName = f.toString().match(/^function (\w+)\(/) 
     sFunctionName = (sFunctionName) ? sFunctionName[1] : 'anonymous function'; 
     result += sFunctionName; 
     result += getArguments(f.toString(), f.arguments); 
     result += "\n"; 
    } 
    alert(result); 
} 


function getArguments(sFunction, a) { 
    var i = sFunction.indexOf(' '); 
    var ii = sFunction.indexOf('('); 
    var iii = sFunction.indexOf(')'); 
    var aArgs = sFunction.substr(ii+1, iii-ii-1).split(',') 
    var sArgs = ''; 
    for(var i=0; i<a.length; i++) { 
     var q = ('string' == typeof a[i]) ? '"' : ''; 
     sArgs+=((i>0) ? ', ' : '')+(typeof a[i])+' '+aArgs[i]+':'+q+a[i]+q+''; 
    } 
    return '('+sArgs+')'; 
} 

var watchTitle = function(id, oldval, newval) { showCallStack(); } 

// !! This is all you should need to update, setting it to whatever you want to watch. 
document.watch("title", watchTitle); 

Answer 9

Questo è il modo più semplice che ho trovato su come farlo: http://www.sprymedia.co.uk/article/Visual+Event

Quando si lavora con gli eventi in Javascript, è spesso facile perdere traccia di ciò che sono sottoscritte eventi dove. Ciò è particolarmente vero se si utilizza un numero elevato di eventi, che è tipico in una moderna interfaccia che utilizza il miglioramento progressivo. Anche le librerie Javascript aggiungono un altro grado di complessità agli ascoltatori da un punto tecnico di vista, mentre dal punto di vista degli sviluppatori possono ovviamente rendere la vita molto più facile! Ma quando le cose vanno male può essere difficile per rintracciare il motivo per cui questo potrebbe essere.

E 'a causa di questo ho messo insieme un bookmarklet JavaScript chiamato visiva evento che mostra visivamente gli elementi di una pagina che hanno eventi sottoscritti a loro, ciò che quegli eventi sono e la funzione che l'evento correrebbe quando attivato. Questo è principalmente inteso per il debug di assistenza , ma può anche essere molto interessante e informativo per vedere gli eventi sottoscritti su altre pagine.

C'è un pulsante segnalibro lì è possibile trascinare sulla barra degli strumenti (FF o Chrome), quindi basta fare clic sul pulsante in qualsiasi pagina in cui si desidera vedere gli eventi collegati. Funziona alla grande! (almeno per eventi allegati da jQuery o altre librerie).

Answer 10

nei tool di sviluppo di Google Chrome (fare clic sui chiave icona> Strumenti> Strumenti per sviluppatori), selezionare l'elemento nella scheda Elementi, sulla destra aprire il pannello 'ascoltatori evento' si vedrà tutti gli eventi

Answer 11

È possibile utilizzare lo script "Visual Event 2" come un segnalibro o lo stesso script di Chrome extension.

Questo script mostra tutti gli eventi js collegati agli elementi dom.