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

скажите, что у вас есть этот div:

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

и вы делаете это:

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

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

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

10
debugging event-handling javascript javascript-events jquery

4 ответов

Chrome Developer tools делает это.

  1. щелкните правой кнопкой мыши элемент
  2. клик Проинспектировать элемент
  3. в правой колонке прокрутите вниз до прослушивателей событий

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

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

14

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

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

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

выполнение вышеуказанного в консоль отобразит объект со свойством для каждого найденного события. В вашем примере он возвращает объект с click свойство типа array, хранящего все события 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

посмотреть демо, показывая как запросить и отобразить объекты в консоли.

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

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

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

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

подробнее о data() в документация

4

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

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

2

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

1