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

Question

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

<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"?

Answer 1

В современных версиях 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" );

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

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

Answer 2

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

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

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

• щелкните правой кнопкой мыши целевой элемент -> выберите «Inspect element»
• Прокрутите вниз с правой стороны рамки разработки, внизу 'event listeners'.
• Разверните дерево, чтобы увидеть, какие события прикреплены к элементу. Не уверен, что это работает для событий, которые обрабатываются с помощью пузырей (я думаю, нет)

Answer 3

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

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

Answer 4

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

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

// Get all event listners bound to the document object
getEventListeners(document);

Answer 5

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

Answer 6

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

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

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

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

Answer 7

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

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

Answer 8

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

Answer 9

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

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