jQuery-Ereignishandler finden, die für ein Objekt registriert sind

Question

Ich muss herausfinden, welche Ereignishandler über ein Objekt registriert sind.

Zum Beispiel:

$("#el").click(function() {...});
$("#el").mouseover(function() {...});

$("#el") tiene anklicken. y Mouseover registriert.

Gibt es eine Funktion, um das herauszufinden, und möglicherweise über die Event-Handler zu iterieren?

Wenn es nicht möglich ist, auf ein jQuery-Objekt durch geeignete Methoden, ist es möglich, auf eine einfache DOM-Objekt?

Answer 1

Ab jQuery 1.8 sind die Ereignisdaten nicht mehr über die "öffentliche API" für Daten verfügbar. Lesen dieser jQuery-Blogbeitrag . Sie sollten nun stattdessen dies verwenden:

jQuery._data( elem, "events" );

elem sollte ein HTML-Element sein, kein jQuery-Objekt oder ein Selektor.

Bitte beachten Sie, dass es sich hierbei um eine interne, "private" Struktur handelt, die nicht verändert werden sollte. Verwenden Sie sie nur für Debugging-Zwecke.

In älteren Versionen von jQuery, müssen Sie möglicherweise die alte Methode, die ist zu verwenden:

jQuery( elem ).data( "events" );

Answer 2

Sie können dies tun, indem Sie die Ereignisse crawlen (ab jQuery 1.8+), wie folgt:

$.each($._data($("#id")[0], "events"), function(i, event) {
  // i is the event type, like "click"
  $.each(event, function(j, h) {
    // h.handler is the function being called
  });
});

Hier ist ein Beispiel, mit dem Sie spielen können:

$(function() {
  $("#el").click(function(){ alert("click"); });
  $("#el").mouseover(function(){ alert("mouseover"); });

  $.each($._data($("#el")[0], "events"), function(i, event) {
    output(i);
    $.each(event, function(j, h) {
        output("- " + h.handler);
    });
  });
});

function output(text) {
    $("#output").html(function(i, h) {
        return h + text + "<br />";
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="el">Test</div>
<code>
    <span id="output"></span>
</code>

Answer 3

Bei jQuery 1.8+ wird dies nicht mehr funktionieren, da die internen Daten in einem anderen Objekt gespeichert sind.

Der neueste inoffizielle (aber auch in früheren Versionen funktionierende, zumindest in 1.7.2) Weg, dies zu tun, ist - $._data(element, "events")

Der Unterstrich ("_") macht hier den Unterschied aus. Intern ruft es $.data(element, name, null, true) der letzte (vierte) Parameter ist ein interner Parameter ("pvt").

Answer 4

Unverschämte Werbung, aber Sie können die findHandlerJS

Um es zu verwenden, müssen Sie nur Folgendes einfügen findHandlersJS (oder fügen Sie einfach die Roh-Javascript-Code in das Konsolenfenster von Chrome) und geben Sie den Ereignistyp und einen Jquery-Selektor für die Elemente an, an denen Sie interessiert sind.

Für Ihr Beispiel können Sie die von Ihnen erwähnten Event-Handler schnell finden, indem Sie

findEventHandlers("click", "#el")
findEventHandlers("mouseover", "#el")

Dies ist das, was zurückgegeben wird:

• Element
  Das eigentliche Element, in dem der Event-Handler registriert wurde
• Veranstaltungen
  Array mit Informationen über die Jquery-Event-Handler für den Ereignistyp, an dem wir interessiert sind (z. B. Klick, Änderung usw.)
  • Handler
    Die eigentliche Ereignisbehandlungsmethode, die Sie sehen können, wenn Sie mit der rechten Maustaste darauf klicken und Funktionsdefinition anzeigen wählen
  • Selektor
    Der für delegierte Ereignisse vorgesehene Selektor. Bei direkten Ereignissen ist er leer.
  • Ziele
    Liste mit den Elementen, auf die dieser Event-Handler abzielt. Bei einem delegierten Ereignishandler, der im Dokumentobjekt registriert ist und auf alle Schaltflächen auf einer Seite abzielt, listet diese Eigenschaft beispielsweise alle Schaltflächen auf der Seite auf. Sie können mit dem Mauszeiger über die Schaltflächen fahren und sie in Chrom hervorgehoben sehen.

Sie können es versuchen ici

Answer 5

Ich benutze eventbug Plugin für Firebug zu diesem Zweck.