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

Ereignisse können mit abgerufen werden:

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

oder jQuery 1.8+:

jQuery._data(elem, 'events');

Anmerkung: Begrenzte Ereignisse mit $('selector').live('event', handler) abgerufen werden können:

jQuery(document).data('events')

Answer 2

JQuery lässt Sie nicht einfach nur auf die Ereignisse für ein bestimmtes Element zugreifen. Sie können auf sie mit einer undokumentierten internen Methode zugreifen

$._data(element, "events")

Aber es werden immer noch nicht alle Ereignisse angezeigt, um genau zu sein nicht die Ereignisse, die mit

$([selector|element]).on()

Diese Ereignisse werden innerhalb des Dokuments gespeichert, so dass Sie sie abrufen können, indem Sie durch

$._data(document, "events")

aber das ist harte Arbeit, denn es gibt Veranstaltungen für ganze Webseiten.

Tom G oben erstellt Funktion, die Dokument für nur Ereignisse der gegebenen Element filtert und verschmilzt Ausgabe beider Methoden, aber es hatte einen Fehler der Duplizierung von Ereignissen in der Ausgabe (und effektiv auf das Element jQuery interne Ereignisliste Durcheinander mit Ihrer Anwendung). Ich habe diesen Fehler behoben und Sie können den Code unten finden. Fügen Sie ihn einfach in Ihre Dev-Konsole oder in Ihren App-Code ein und führen Sie ihn bei Bedarf aus, um eine schöne Liste aller Ereignisse für ein bestimmtes Element zu erhalten.

Was ist wichtig zu beachten, Element ist eigentlich HTMLElement, nicht jQuery Objekt.

function getEvents(element) {
    var elemEvents = $._data(element, "events");
    var allDocEvnts = $._data(document, "events");
    function equalEvents(evt1, evt2)
    {
        return evt1.guid === evt2.guid;
    }

    for(var evntType in allDocEvnts) {
        if(allDocEvnts.hasOwnProperty(evntType)) {
            var evts = allDocEvnts[evntType];
            for(var i = 0; i < evts.length; i++) {
                if($(element).is(evts[i].selector)) {
                    if(elemEvents == null) {
                        elemEvents = {};
                    }
                    if(!elemEvents.hasOwnProperty(evntType)) {
                        elemEvents[evntType] = [];
                    }
                    if(!elemEvents[evntType].some(function(evt) { return equalEvents(evt, evts[i]); })) {
                        elemEvents[evntType].push(evts[i]);
                    }
                }
            }
        }
    }
    return elemEvents;
}

Answer 3

Ich muss sagen, dass viele der Antworten interessant sind, aber vor kurzem hatte ich ein ähnliches Problem und die Lösung war extrem einfach, indem ich den DOM-Weg ging. Es ist anders, weil Sie nicht iterieren, sondern direkt auf das Ereignis zielen, das Sie benötigen, aber im Folgenden werde ich eine allgemeinere Antwort geben.

Ich hatte ein Bild in einer Reihe:

<table>
  <td><tr><img class="folder" /></tr><tr>...</tr></td>
</table>

Und dieses Bild war mit einem Click-Event-Handler versehen:

imageNode.click(function () { ... });

Meine Absicht war es, den anklickbaren Bereich auf die gesamte Zeile auszudehnen, also habe ich zunächst alle Bilder und relativen Zeilen erhalten:

tableNode.find("img.folder").each(function () {
  var tr;

  tr = $(this).closest("tr");
  // <-- actual answer
});

Jetzt im eigentliche Antwort Zeile habe ich soeben eine Antwort auf die ursprüngliche Frage gegeben:

tr.click(this.onclick);

Also habe ich den Event-Handler direkt aus dem DOM-Element geholt und ihn in den jQuery-Klick-Event-Handler gesetzt. Funktioniert wie ein Charme.

Nun zum allgemeinen Fall. In den alten Tagen vor jQuery konnte man alle Ereignisse, die mit einem Objekt verbunden waren, mit zwei einfachen, aber mächtigen Funktionen erhalten, die uns Sterblichen von Douglas Crockford :

function walkTheDOM(node, func)
{
  func(node);
  node = node.firstChild;
  while (node)
  {
    walkTheDOM(node, func);
    node = node.nextSibling;
  }
}

function purgeEventHandlers(node)
{
  walkTheDOM(node, function (n) {
    var f;

    for (f in n)
    {
      if (typeof n[f] === "function")
      {
        n[f] = null;
      }
    }
  });
}

Answer 4

Versuchen Sie das Jquery Debugger Plugin, wenn Sie Chrome verwenden: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en

Answer 5

Ein anderer Weg, es zu tun ist, nur jQuery verwenden, um das Element zu greifen, dann gehen Sie durch tatsächliche Javascript zu erhalten und zu setzen und spielen mit den Event-Handler. Zum Beispiel:

var oldEventHandler = $('#element')[0].onclick;
// Remove event handler
$('#element')[0].onclick = null;
// Switch it back
$('#element')[0].onclick = oldEventHandler;