Часто бывает нужно определить, какие обработчики навешаны на DOM-элементы. К сожалению, из коробки ни FireBug, ни Chrome Developer Tools не дают возможности удобно ответить на этот вопрос, так как показывают лишь прямые обработчики, которые были повешены присваиванием element.onclick = handler. Если же для этого использовался jQuery, то узнать о наличии обработчиков можно только просканировав дерево элементов до document, просматривая то, что хранится в $._data(element, ‘events’). Для этого я написал небольшой сниппет, который добавил в код сайта:

/**
 * Дампер jquery on- и live-обработчиков.
 * @author elwood
 * 16.10.13 15:43
 */
 
/**
 * Выводит дамп on- и live-обработчиков для указанного объекта и всех его родителей.
 * У тех обработчиков, у которых определён селектор, выводятся также дочерние узлы (относительно
 * элемента, к которому привязан обработчик), удовлетворяющие ему.
 * @param $object
 */
function dumpEvents($object) {
 
    var $current = $object;
    while ($current.length != 0) {
        console.info("processing %o", $current[0]);
        var eventsObject = $._data($current[0], 'events');
        for (var property in eventsObject) {
            console.info(property + ':');
            var handlers = eventsObject[property];
            for (var i = 0; i < handlers.length; i++) {
                if (typeof handlers[i].selector != undefined && handlers[i].selector != null) {
                    console.info("selector: " + handlers[i].selector + ", handler: %O", handlers[i].handler);
                    var $selected = $current.find(handlers[i].selector);
                    console.info("selected %d children:", $selected.length);
                    for (var j = 0; j < $selected.length; j++) {
                        console.info(">> %o", $selected[j]);
                    }
                } else {
                    console.info("handler: %O", handlers[i].handler);
                }
            }
        }
 
        $current = $current.parent();
    }
}
 
/**
 * Вариант использования с xpath (для удобства при работе в хроме).
 * @param xpath
 */
function dumpEventsX(xpath) {
    var $object = $(document).xpath(xpath);
    dumpEvents($object);
}
 
/**
 * Выводит live-обработчики, глобально привязанные к объекту document.
 */
function dumpDocumentEvents() {
    dumpEvents($(document));
}

Для работы dumpEventsX() необходимо наличие плагина jQuery.XPath. XPath я использовал для того, чтобы из панели Elements в хроме правой кнопкой можно было делать Copy XPath и потом в консоли вставлять этот xpath в качестве аргумента функции dumpEventsX().

Честно говоря, я глубоко не разбирался в том, как реализована подписка обработчиков с помощью jQuery, и есть ли другие варианты, которые работают иначе. Вроде бы, bind() и click() делают то же самое, только с конечным объектом (селектор у хендлера будет пустой, и на потомков хендлер уже не будет работать).

Параллельно с тем, как я ковырялся в этих зарослях, нашёл несколько плагинов, делающих примерно то же самое.

Для Сhrome

jQuery Debugger – в Elements появляются вкладки jQuery Data и jQuery Events для каждого DOM-элемента можно посмотреть, что к нему джикверивского привязано, очень удобное расширение

Вот как это выглядит:

Visual Event – очень красивый плагин, при нажатии на кнопку показывает все элементы с привязанными к ним событиями и кодом их обработчиков. Поддерживает события jQuery.
Event Spy – тоже полезная штука, но этот плагин, судя по всему, умеет работать только с непосредственно привязанными обработчиками. Код обработчиков тоже выводится, довольно удобно.

Для FireFox

FireQuery– аддон к FireBug, показывает данные, привязанные к DOM-элементам (правда, не очень удобная навигация) – полезный аддон
EventBug – тоже аддон к FireBug, добавляет вкладку Events к броузеру DOM-элементов
Visual Event – то же самое, что и в хроме, только для FireFox он выполнен в виде bookmarklet, то есть ссылки, которую нужно добавить в закладки, и нажимать когда работаешь со страницей. Наверное, и в Опере работает.