Как отлаживать привязки событий JavaScript / jQuery с помощью Firebug или аналогичных инструментов?

Вот плагин, который может перечислить все обработчики событий для любого данного элемента/события:

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ') 
 Использование это как это: 
 
// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});
 
 Src: (мой блог)->  http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/  
 ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

Использование это как это:

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});

Src: (мой блог)-> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Согласно этот поток , нет никакого пути в Firebug для просмотра, какие события присоединены к слушателям на элементе DOM.

Это похоже на лучшее, которое можно сделать, или что предлагает tj111, или Вы могли щелкнуть правой кнопкой по элементу в средстве просмотра HTML и нажать "Log Events", таким образом, Вы видите, какие события стреляют для конкретного элемента DOM. Я предполагаю, что можно было сделать это для наблюдения, какие события могли исчерпать конкретные функции.

jQuery хранит события в следующем:

$("a#somefoo").data("events")

Выполнение console.log($("a#somefoo").data("events")) должно перечислить события, присоединенные к тому элементу.

Существует хороший bookmarklet, названный Визуальное Событие , которое может показать Вам все события, присоединенные к элементу. Это нанесло цветную маркировку на выделения для различных типов событий (мышь, клавиатура, и т.д.). Когда Вы нависаете над ними, это показывает тело обработчика событий, как это было присоединено, и файл/номер строки (на WebKit и Opera). Можно также инициировать событие вручную.

Это не может найти каждое событие, потому что нет никакого стандартного способа искать, какие обработчики событий присоединены к элементу, но это работает с популярными библиотеками как jQuery, Прототип, MooTools, YUI, и т.д.

Вы можете использовать FireQuery . Он показывает любые события, прикрепленные к элементам DOM, на вкладке HTML Firebug. Он также показывает любые данные, прикрепленные к элементам через $. Data .

Похоже, команда FireBug работает над расширением EventBug. Он добавит еще одну панель в FireBug - Events.

«На панели событий будут перечислены все обработчики событий на странице, сгруппированные по типу события. Для каждого типа события вы можете открыть, чтобы увидеть элементы, к которым привязаны прослушиватели, и сводку источника функции». EventBug Rising

Хотя сейчас они не могут сказать, когда он будет выпущен.

Как предложил коллега, console.log> alert:

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
    console.log(value);
})

Консоль разработчика WebKit (в Chrome, Safari и т. Д.) Позволяет просматривать присоединенные события для элементов.

Более подробно в этом вопросе о переполнении стека