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

Ich habe einige der obigen Antworten kombiniert und dieses verrückt aussehende, aber funktionale Skript erstellt, das hoffentlich die meisten der Ereignis-Listener für das angegebene Element auflistet. Fühlen Sie sich frei, es hier zu optimieren.

var element = $("#some-element");

// sample event handlers
element.on("mouseover", function () {
  alert("foo");
});

$(".parent-element").on("mousedown", "span", function () {
  alert("bar");
});

$(document).on("click", "span", function () {
  alert("xyz");
});

var collection = element.parents()
  .add(element)
  .add($(document));
collection.each(function() {
  var currentEl = $(this) ? $(this) : $(document);
  var tagName = $(this)[0].tagName ? $(this)[0].tagName : "DOCUMENT";
  var events = $._data($(this)[0], "events");
  var isItself = $(this)[0] === element[0]
  if (!events) return;
  $.each(events, function(i, event) {
    if (!event) return;
    $.each(event, function(j, h) {
      var found = false;        
      if (h.selector && h.selector.length > 0) {
        currentEl.find(h.selector).each(function () {
          if ($(this)[0] === element[0]) {
            found = true;
          }
        });
      } else if (!h.selector && isItself) {
        found = true;
      }

      if (found) {
        console.log("################ " + tagName);
        console.log("event: " + i);
        console.log("selector: '" + h.selector + "'");
        console.log(h.handler);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent-element">
  <span id="some-element"></span>
</div>