Осмотрите элемент, чтобы исследовать привязки событий jQuery

Question

Гипотетический: я нахожу страницу с кнопкой ('#bigButton'), которая при щелчке вызывает показ ламы ('img # theLlama') () с использованием jQuery.

Итак, где-то (скажем,, Строка 76) в buttons.js:

$('#bigButton').click(function(){
$('img#theLlama').show();
})

Теперь, допустим, у меня есть большая HTML-страница с целой кучей файлов .js.Я могу нажать на кнопку и увидеть, как появляется лама, но я понятия не имею, где находится приведенный выше код.

Решение, которое я ищу, очень похоже на то, которое доступно с CSS в Firebug.Я хочу осмотреть элемент и показать, что этот jQuery встречается в строке 76 файла buttons.js вместе с любыми другими привязками к этому элементу.

* Примечание.ответ на «вопрос ламы», то есть указание на решение, которое описано выше.*

FireQuery - отличный инструмент для многих задач jQuery, но, похоже, он не отвечает на вопрос ламы.Если я ошибаюсь, поправьте меня.

Answer 1

Использование Firebug , FireQuery и этой скрипки :

Нажатие Cmd + Shift + C (осмотреть элемент) и нажатие на кнопку показывает это:

Нажатие на события Object {click= } показывает это (после расширения некоторой информации)

И нажатие на function() показывает это:

Какой должен быть код, который вы ищете, верно?

Как примечание, Firebug не всегда может найти точную строку кода, из которой что-то пришло. У меня был этот метод полностью провал! Другой подход заключается в использовании выражений именованных функций. Изменение кода на:

$('#bigButton').click(function showMyLlama(){
  $('img#theLlama').show();
})

Теперь выявляется это при проверке объекта events:

Что гораздо полезнее, чем просто function(), поскольку теперь очевидно, что этот обработчик показывает нам ламу. Теперь вы также можете найти код для имени функции и найти его!

---

Использование Chrome , встроенного веб-инспектора и этой скрипки :

Нажатие Cmd + Shift + C (Проверка элемента) и нажатие на кнопку показывает это:

Нажав на кнопку в инспекторе элементов, затем нажав Escape, чтобы открыть консоль JS:

В консоли Chrome $0 относится к выбранному элементу на панели элементов.

Ввод $._data( $0 ) даст нам объект данных jQuery (внутренний), который включает в себя события, как в нашем примере с Firebug. К сожалению, Chrome не позволит нам щелкнуть по функции, но он покажет источник: 1061 *

<Broken Screenshot link>

---

Примечание о .live() событиях:

Живые события хранятся в $._data( document, "events" ) и содержат origHandler, который указывает на функцию:

<Broken screenshot link>

Answer 2

Учитывая интерфейс, который вам нужен, я думаю, вы захотите FireQuery: http://firequery.binaryage.com/

Это аддон Firebug специально для таких областей (специфичный для jQuery аддон, сильный в данных / событиях).

Answer 3

Ну, Eventbug покажет вам все обработчики событий для элемента, http://getfirebug.com/releases/eventbug но часто обработчик - это какой-то общий код.

Answer 4

FireQuery является наиболее удобным, но если вам нужно сделать это вручную, вы можете получить ссылку на функцию обработки кликов с помощью $(element).data('events').click[0].handler (конечно, это не обязательно 0, если есть несколько обработчиков кликов). Оттуда это до вашего любимого отладчика, чтобы найти эту функцию в коде. (Использование именованных функций помогает. Иногда Firebug может находить анонимные функции, но чаще - нет. Тем не менее, он будет отображать тело функции, если вы наводите курсор мыши над ней.)

Обновление Вот как данные отображаются с помощью FireQuery:

Просмотр HTML:

Консоль