Wie zu verwenden getEventListeners in Chrome Dev Tool?

Ich habe versucht zurückzuverfolgen, welche Funktion eingehängt in ein click-Ereignis des .someclass. Ich öffne Chrome Dev Tool und geben Sie diese

getEventListeners(document.querySelector('.someclass'));

Das Ergebnis ist dieses

Object {}

Kann ich nicht klicken und es öffnen, um herauszufinden, den Namen des Objekts oder den source-code, der Griff click-Ereignis.

Gibt es eine Möglichkeit heraus zu finden?

UPDATE 1:

Gefolgt Krasimir ist beraten Sie unten. Konnte es nur zwei Ereignisse: mousemove oder mouseover. Also, wie finde ich die genaue Funktion, die Handhabung, die Veranstaltung für canvas.overlay? Es gibt einfach zu viele, um einen Drilldown in.

Wie zu verwenden getEventListeners in Chrome Dev Tool?

InformationsquelleAutor HP. | 2013-08-31
  1. 13
    1. Öffnen Sie die DevTools
    2. Öffnen Sie die Registerkarte Elemente, und suchen Sie das element (.someclass)
    3. Es gibt vier Tabletten pro element - Stile, Eigenschaften, DOM-Breakpoints und Event-Listener
    4. Wählen Sie Ereignis-Listener

    Wie zu verwenden getEventListeners in Chrome Dev Tool?

    • Ich Hinzugefügt update mit screenshot. Es gibt zu viele drill-down-Knoten. Welchen muss ich wählen, um herauszufinden, die genaue Funktion?
    • Sorry, aber es ist schwer zu sagen, ohne zu sehen, die eigentliche Seite.
    • Auch ohne einen screenshot dieser Antwort ist Super!!!
    InformationsquelleAutor Krasimir
  2. 11

    Sind Sie immer ein leeres Objekt beim Aufruf

    getEventListeners(document.querySelector('.someclass'));

    wahrscheinlich weil der Hörer ist nicht angeschlossen an .someclass element selbst (direct-Ereignis), aber auf seine Vorfahren (Delegierte Ereignis). Es gibt eine gute Erklärung dieser hier.

    Liste können Sie sowohl delegiert und direkte Ereignisse durch den Aufruf getEventListeners für den angegebenen Knoten und alle seine Vorfahren. Diese Funktion sollte den trick tun:

    getAllEventListeners = function(el) {
 var allListeners = {}, listeners;

 while(el) {
  listeners = getEventListeners(el);

  for(event in listeners) {
   allListeners[event] = allListeners[event] || [];
   allListeners[event].push({listener: listeners[event], element: el});  
  }

  el = el.parentNode;
 }

 return allListeners;
}

    Jedoch wird diese Ausgabe genau die gleiche Sache wie die "Ereignis-Listener" tab (mit "Filter" - option auf "Alle Knoten"), dass Krasimir erwähnt in seiner Antwort.

    • Ich lief und es funktionierte, aber es gab mir eine Reihe von Ereignissen, und ich weiß nicht, was man zu Holen 🙁
    • Ich verstehe nicht, was Sie versuchen, zu finden. Wenn Sie auf der Suche nach der click event-handler hast, dann hast du nur eine auf der Liste. Wenn Sie sind auf der Suche nach mousemove Veranstaltung über canvas.overlay dann gibt es nur ein entweder.
    • Sorry, wenn ich Verwirrung gestiftet, aber ich sah viele Funktionen unter mousemove wie prototype: Object oder __proto__: function Empty() oder <function scope> ich bin also nicht sicher sind, welches die listener-Funktion.
    • Ich erhalte eine Fehlermeldung mit hasOwnProperty, der nicht eine Funktion in listeners. Sollte ich event.hasOwnProperty()? So ist es nicht fail aber allListeners endet als ein leeres Objekt, als dass die Funktionen immer zurück false.
    • überspringen Sie die hasOwnProperty überprüfen (habe ich aktualisiert, der code). Für einige Grund, in Chrome wurde diese Methode entfernt vom Objekt zurückgegeben getEventListeners.
    • Genial, vielen Dank! Hier ist eine vereinfachte version des Codes aus, um die Liste der Knoten und Ihre eigenen Veranstaltungen, so dass Sie wissen, wo jeder von Ihnen kommt aus: var el = document.querySelector('.someclass'); while (el) { console.log(el, getEventListeners(el)); el = el.parentNode; }

    InformationsquelleAutor Konrad Dzwinel
  3. 0

    Ich denke, Sie sind mit jQuery zu binden, Veranstaltungen zu diesem element.
    Das ist, warum Sie nicht sehen können, die tatsächliche hf-code in der drill-down-Menü.
    Ohne eingebundenes jQuery, ist der aktuelle code angezeigt werden soll, in "listenerBody" wie folgt:

    Wie zu verwenden getEventListeners in Chrome Dev Tool?

    InformationsquelleAutor Sean Chen
Schreibe einen Kommentar