Есть ли способ найти обработчики событий элемента с 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. Вы найдете раздел "Слушатели событий".