Есть ли способ найти обработчики событий элемента с Javascript?

Скажем, у вас есть этот div:

<div id="foo">bar</div>

И вы это сделаете:

$("#foo").click(someFunction);

где-то внутри вашего кода javascript.

Как только страница была загружена, есть способ узнать, через firebug или проверить элемент в chrome или что-нибудь еще, что событие click для #foo привязано к someFunction? I.e, найдите это, не просматривая весь свой код?

Ответ 1

Средства разработчика Chrome делают это.

щелкните правой кнопкой мыши элемент
щелкните элемент проверки
в правой колонке, прокрутите вниз до прослушивателей событий

Это даст вам список прослушивателей событий на объекте, который можно развернуть, чтобы найти их источник и присоединенную функцию.

Firebug имеет эту информацию на вкладке DOM, но она менее удобна для пользователя.

Ответ 2

Вы можете использовать консоль в встроенных средствах разработки браузеров. Они встроены в IE и Chrome, а FF - Firebug AddOn. Я не знаю о других браузерах.

Используя консоль отладчика, вы можете использовать jQuery data("events") для запроса связанных событий элемента. Кроме того, эти консоли также позволяют динамически развернуть любые дополнительные детали интересующих вас событий.

$("#foo").data("events");

Выполнение вышеуказанного в консоли отобразит объект со свойством для каждого найденного события. В вашем примере он возвращает объект с свойством click массива типов, хранящим все события кликов.

Если у вас есть события click, и вы хотите только этот объект, вы можете выполнить следующее в консоли:

$("#foo").data("events").click;

Каждый объект события имеет свойство handler, которое покажет вам функцию, к которой они привязаны:

Object
data: null
guid: 2
handler: function mytestFunction(){
arguments: null
caller: null
guid: 2
length: 0
name: "mytestFunction"
prototype: mytestFunction
__proto__: function Empty() {}
namespace: ""
origType: "click"
quick: null
selector: null
type: "click"
__proto__: Object

Смотрите DEMO, в котором показано, как запрашивать и отображать объекты в консоли.

В качестве альтернативы вы также можете использовать "обработчики" для общего итогового объекта:

$("#foo").data("handlers");

Обратите внимание, что .data("events/handlers") не будет включать какие-либо события, подключенные в html, такие как:

<div id="foo" onclick="...">bar</div>

Дополнительная информация о data() содержится в документации

Ответ 3

Я бы предложил использовать Visual Event 2.

Вот описание о том, как его использовать. Я использую его почти каждый день, и это очень хороший инструмент.

Ответ 4

Я не знаю о Firefox, но есть простой способ увидеть прослушиватели событий в Chrome и Safari. Просто откройте Инструменты разработчика, выберите свой элемент и прокрутите вниз до панели свойств CSS. Вы найдете раздел "Слушатели событий".