Могу ли я найти события, связанные с элементом с помощью jQuery?

355

По этой ссылке я связываю два обработчика событий:

<a href='#' id='elm'>Show Alert</a>

JavaScript:

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

Есть ли способ получить список всех событий, связанных с элементом, в этом случае для элемента с id="elm"?

Правин Прасад
источник

Ответы:

517

В современных версиях jQuery вы будете использовать $._dataметод для поиска любых событий, прикрепленных jQuery к рассматриваемому элементу. Обратите внимание , что это метод только для внутреннего использования:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

Результатом from $._dataбудет объект, который содержит оба события, которые мы установили (показано ниже с mouseoutрасширенным свойством):

Консольный вывод за $ ._

Затем в Chrome вы можете щелкнуть правой кнопкой мыши функцию-обработчик и нажать «Просмотр определения функции», чтобы показать вам точное место, где оно определено в вашем коде.

Сэмпсон
источник
59
Это работает только для элементов, связанных через помощники jQuery.
Алекс Чиминиан
3
@jammypeach Я пробую ваше решение, но все еще получаю неопределенное значение для селектора. Я использовал $ ('# elem'). Bind ('click', function () {}); если это будет иметь значение.
Маркус
6
@marcus аааа, ага, я что-то пропустил, извините :)$._data(element[0], ‘events’);
totallyNotLizards
16
В эти дни нужно использовать: $ ._ data ($ ('# foo') [0]) .events
Дональд Тейлор
5
$._data()используется внутренним JQuery. $.data()это публичный метод для пользователя. И $.data(element, 'events')работает отлично.
slideshowp2
73

Общий случай:

  • Нажмите, F12чтобы открыть Dev Tools
  • Нажмите на Sourcesвкладку
  • На правой стороне прокрутите вниз Event Listener Breakpointsи разверните дерево
  • Нажмите на события, которые вы хотите прослушать.
  • Взаимодействуйте с целевым элементом, если они сработают, вы получите точку останова в отладчике

Точно так же вы можете:

  • щелкните правой кнопкой мыши на целевом элементе -> выберите " Inspect element"
  • Прокрутите вниз с правой стороны рамки разработки, внизу есть ' event listeners'.
  • Разверните дерево, чтобы увидеть, какие события прикреплены к элементу. Не уверен, что это работает для событий, которые обрабатываются через пузыри (я думаю, нет)
Вали Шах
источник
3
Я согласен, что это предпочтительный метод и является универсальным решением по сравнению с использованием jQuery, который может быть или не быть доступным.
deadbabykitten
3
@dead umm ... вопрос конкретно относится к jQuery и использует jQuery в приложении-примере - ответ должен быть действительным только в контексте jQuery (?)
Код Jockey
3
Полезно понимать ответы и в других контекстах. Тот факт, что кто-то задает конкретный вопрос, не означает, что ограниченный ответ, который он получит, является лучшим из доступных. Особенно с jQuery, люди склонны полагаться на это как на опору. Понимание базовой архитектуры очень важно. Этот ответ показывает, что JQuery даже не обязательно требуется. Вопрос и пример слишком расплывчаты, чтобы знать об использовании, и поэтому оставляют открытым для толкования то, что можно считать правильным ответом.
deadbabykitten
12

Я добавляю это для потомков; Есть более простой способ, который не требует написания большего количества JS. Используя удивительный аддон Firebug для Firefox ,

  1. Щелкните правой кнопкой мыши на элементе и выберите «Проверить элемент с помощью Firebug».
  2. На боковых панелях (показанных на скриншоте) перейдите на вкладку событий, используя крошечную стрелку>
  3. Вкладка событий показывает события и соответствующие функции для каждого события
  4. Текст рядом с ним показывает расположение функции

введите описание изображения здесь

kakoma
источник
1
Это также доступно в IE dev tools.
Devlin Carnate
9

Теперь вы можете просто получить список прослушивателей событий, связанных с объектом, с помощью функции javascript getEventListeners ().

Например, введите следующее в консоли инструментов dev:

// Get all event listners bound to the document object
getEventListeners(document);
ScottyG
источник
4
Я думаю, что это не нативная функция и нуждается в следующем сценарии / зависимости: github.com/colxi/getEventListeners Это следует добавить к ответу, поскольку в противном случае оно вводит в заблуждение. Но спасибо, что привели меня к этому «плагину»; выглядит хорошо. :)
Dennis98
6

JQuery Audit плагин плагин должен позволить вам сделать это с помощью обычных инструментов Chrome Dev. Он не идеален, но должен позволять вам видеть фактический обработчик, связанный с элементом / событием, а не только общий обработчик jQuery.

JohnK
источник
3

Хотя это не совсем специфично для селекторов / объектов jQuery, в FireFox Quantum 58.x вы можете найти обработчики событий для элемента, используя инструменты Dev:

  1. Щелкните правой кнопкой мыши элемент
  2. В контекстном меню выберите «Проверить элемент».
  3. Если рядом с элементом есть значок «ev» (желтая рамка), нажмите значок «ev»
  4. Отображает все события для этого элемента и обработчик событий

FF Quantum Dev Tools

Chris22
источник
1
потрясающий ответ, особенно скриншот делает это намного проще. Спасибо за усилия!
Bizi
2

Я использовал что-то вроде этого, если ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... сделать что-то, снова связать их обработчики событий}, чтобы проверить если мой элемент связан с каким-либо событием. Он по-прежнему скажет undefined (null), если вы отсоединили все свои обработчики событий от этого элемента. Вот почему я оцениваю это в выражении if.

Адриан Лью
источник
2

Обратите внимание, что события могут быть прикреплены к самому документу, а не к рассматриваемому элементу. В этом случае вы захотите использовать:

$._data( $(document)[0], "events" );

И найдите событие с правильным селектором :

введите описание изображения здесь

А затем посмотрите на обработчик > [[FunctionLocation]]

введите описание изображения здесь

Pikamander2
источник
0

Когда я передаю небольшой сложный запрос DOM к данным $ ._, например, $._data($('#outerWrap .innerWrap ul li:last a'), 'events')он выдает неопределенное в консоли браузера.

Поэтому мне пришлось использовать данные $ ._ в родительском div: $._data($('#outerWrap')[0], 'events')чтобы увидеть события для тегов a. Вот JSFiddle для того же: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/

гири-jeedigunta
источник
3
Причина в том, что вы делегируете событие от $('#outerWrap'). События на самом деле связаны с этим элементом, а не с отдельными якорями.
Скоттукс