jQuery find events handlers registered with a object

Możesz to zrobić tak:

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

$.each($("#el").data("events"), function(i, e) {
    alert(i);
});
//alerts 'click' then 'mouseover'

Jeśli korzystasz z jQuery 1.4+, spowoduje to powiadomienie o zdarzeniu i funkcjach z nim związanych:

$.each($("#el").data("events"), function(i, event) {
    alert(i);
    $.each(event, function(j, h) {
        alert(h.handler);
    });
});
//alerts: 
//'click'
//'function (){ alert("click"); }'
//'mouseover'
//'function(){ alert("mouseover"); }'

Możesz grać z nim na jsFiddle tutaj ​

Dla jQuery 1.8+ nie będzie to już działać, ponieważ wewnętrzne dane są umieszczane w innym obiekcie.

Najnowszym nieoficjalnym (ale działa również w poprzednich wersjach, przynajmniej w 1.7.2) sposobem na to jest - $._data(element, "events")

Podkreślenie ( " _ " ) jest tym, co tutaj robi różnicę. Wewnętrznie wywołuje $.data(element, name, null, true), ostatnim (czwartym) parametrem jest wewnętrzny ("pvt").

Bezwstydna wtyczka, ale można użyć findHandlerJS

Aby go użyć, wystarczy dołączyć findHandlersJS (lub po prostu skopiować i wkleić surowy kod javascript do okna konsoli chrome) i określić typ zdarzenia oraz selektor jquery dla interesujących Cię elementów.

Dla Twojego przykładu możesz szybko znaleźć procedury obsługi zdarzeń, o których wspomniałeś, wykonując

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

To jest to, co zostanie zwrócone:

• element
  Rzeczywista element, w którym Obsługa zdarzenia została zarejestrowana w
• wydarzenia
  Tablica z informacjami o procedurach obsługi zdarzeń jquery dla interesującego nas typu zdarzenia (np. click, change, etc)
  • handler
    Rzeczywista metoda obsługi zdarzenia, którą można zobaczyć klikając ją prawym przyciskiem myszy i wybierając Pokaż definicję funkcji
  • selektor
    Selektor przewidział delegowane zdarzenia. Będzie pusty dla bezpośrednich zdarzeń.
  • cele
    Lista z elementami, które / align = "left" / Na przykład, w przypadku delegowanej procedury obsługi zdarzeń zarejestrowanej w obiekcie document i skierowanej do wszystkich przycisków na stronie, Ta właściwość wyświetli wszystkie przyciski na stronie. Możesz je najechać i zobaczyć podświetlone w chrome.

Możesz spróbować Proszę.

Używam do tego celu wtyczki eventbug do firebug.

Połączyłem oba rozwiązania z @jps w jedną funkcję:

jQuery.fn.getEvents = function() {
    if (typeof(jQuery._data) == 'function') {
        return jQuery._data(this.get(0), 'events') || {};
    } else if (typeof(this.data) == 'function') { // jQuery version < 1.7.?
        return this.data('events') || {};
    }
    return {};
};

Ale uwaga, Ta funkcja może zwracać tylko te zdarzenia, które zostały ustawione za pomocą samego jQuery.

Od wersji 1.9 nie ma udokumentowanego sposobu na odzyskanie zdarzeń, innego niż użycie wtyczki Migrate do przywrócenia starego zachowania. Przydałoby ci się.metoda data () jak wspomina jps, ale jest to metoda wewnętrzna. Więc po prostu zrób właściwą rzecz i użyj wtyczki Migrate, jeśli potrzebujesz tej funkcjonalności.

Z dokumentacji jQuery na .data("events")

Przed 1.9, .dane ("zdarzenia") mogą być użyte do odzyskania jQuery nieudokumentowana wewnętrzna struktura danych zdarzeń dla element, jeśli nie ma innego kod zdefiniował element danych o nazwie "zdarzenia". This special sprawa została usunięta w 1.9. Nie ma publicznego interfejsu do pobrania ta wewnętrzna struktura danych i pozostaje nieudokumentowana. Jednakże, wtyczka jQuery Migrate przywraca to zachowanie dla kodu, który zależy robi się.

W nowoczesnej przeglądarce z ECMAScript 5.1 / Array.prototype.map Możesz również użyć

jQuery._data(DOCUMENTELEMENT,'events')["EVENT_NAME"].map(function(elem){return elem.handler;});

W konsoli przeglądarki, która wyświetli źródło programów obsługi, rozdzielane przecinkami. Przydatne do spojrzenia na to, co wszystko działa na danym wydarzeniu.

Muszę powiedzieć, że wiele odpowiedzi jest interesujących, ale ostatnio miałem podobny problem i rozwiązanie było niezwykle proste, idąc drogą DOM. Jest inaczej, ponieważ nie iterujesz, ale celujesz bezpośrednio w wydarzenie, którego potrzebujesz, ale poniżej podam bardziej ogólną odpowiedź.

Miałem obraz w rzędzie:

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

I ten obrazek miał dołączoną obsługę zdarzenia kliknięcia:

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

Moim zamiarem było rozszerzenie klikalnego obszaru na cały wiersz, więc najpierw dostałem wszystkie obrazy oraz wiersze względne:

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

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

Teraz w wierszu faktycznego anwer zrobiłem tak, dając odpowiedź na pierwotne pytanie:

tr.click(this.onclick);

Więc pobrałem obsługę zdarzeń bezpośrednio z elementu DOM i umieściłem ją w jQuery click event handler. Działa jak urok.

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;
      }
    }
  });
}

Zdarzenia można pobrać za pomocą:

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

Lub jQuery 1.8+:

jQuery._data(elem, 'events');

Uwaga: Zdarzenia ograniczone za pomocą $('selector').live('event', handler) można pobrać za pomocą:

jQuery(document).data('events')

Stworzyłem własny selektor jQuery, który sprawdza zarówno pamięć podręczną jQuery przypisanych programów obsługi zdarzeń, jak i elementy, które używają natywnej metody do ich dodawania:

(function($){

    $.find.selectors[":"].event = function(el, pos, match) {

        var search = (function(str){
            if (str.substring(0,2) === "on") {str = str.substring(2);}
            return str;
        })(String(match[3]).trim().toLowerCase());

        if (search) {
            var events = $._data(el, "events");
            return ((events && events.hasOwnProperty(search)) || el["on"+search]);
        }

        return false;

    };

})(jQuery);

Przykład:

$(":event(click)")

Zwróci to elementy, które mają dołączoną obsługę kliknięć.

Innym sposobem jest użycie jQuery do przechwycenia elementu, a następnie przejście przez rzeczywisty Javascript, aby pobrać i ustawić i pobawić się programami obsługi zdarzeń. Na przykład:

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

Spróbuj jQuery debugger plugin jeśli używasz chrome: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en

Aby sprawdzić zdarzenia na elemencie:

var events = $._data(element, "events")

Zauważ, że będzie to działać tylko z bezpośrednimi programami obsługi zdarzeń, jeśli używasz $(document).po włączeniu ("event-name"," JQ-selector", function() { //logic}), będziesz chciał zobaczyć funkcję getEvents na dole tej odpowiedzi

Na przykład:

 var events = $._data(document.getElementById("myElemId"), "events")

Lub

 var events = $._data($("#myElemId")[0], "events")

Pełny Przykład:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
        <script>
            $(function() {
                $("#textDiv").click(function() {
                    //Event Handling
                });
                var events = $._data(document.getElementById('textDiv'), "events");
                var hasEvents = (events != null);
            });
        </script>
    </head>
    <body>
        <div id="textDiv">Text</div>
    </body>
</html>

Pełniejszy sposób sprawdzania, który obejmuje dynamiczne słuchacze, zainstalowane z $(document).on

function getEvents(element) {
    var elemEvents = $._data(element, "events");
    var allDocEvnts = $._data(document, "events");
    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] = [];
                    }
                    elemEvents[evntType].push(evts[i]);
                }
            }
        }
    }
    return elemEvents;
}

Przykładowe użycie:

getEvents($('#myElemId')[0])