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

343

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

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

Теги:
javascript-events

9 ответов

473
Лучший ответ

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

Изображение 2271

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

Поделиться
  • 57
    Это работает только для элементов, связанных через помощники jQuery.
  • 3
    @jammypeach Я пробую ваше решение, но все еще получаю неопределенное значение для селектора. Я использовал $ ('# elem'). Bind ('click', function () {}); если это будет иметь значение.
Показать ещё 14 комментариев
65

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

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

Аналогичным образом вы можете:

  • щелкните правой кнопкой мыши на целевом элементе → выберите " Inspect element "
  • Прокрутите вниз по правой стороне рамки dev, внизу - " event listeners ".
  • Разверните дерево, чтобы узнать, какие события связаны с элементом. Не уверен, что это работает для событий, которые обрабатываются через пузыри (я предполагаю, что нет)
Поделиться
  • 3
    Я согласен, что это предпочтительный метод и является универсальным решением по сравнению с использованием jQuery, который может быть или не быть доступным.
  • 3
    @dead umm ... вопрос конкретно относится к jQuery и использует jQuery в приложении к примеру - ответ должен быть действительным только в контексте jQuery (?)
Показать ещё 1 комментарий
11

Я добавляю это для потомков; Там более простой способ, который не требует написания более JS. Используя удивительный аддон firebug для firefox,

  • Щелкните правой кнопкой мыши элемент и выберите "Осмотреть элемент с помощью Firebug"
  • На панелях боковой панели (показано на скриншоте) перейдите на вкладку событий с помощью крошечной стрелки
  • На вкладке "События" отображаются события и соответствующие функции для каждого события
  • Рядом с ним отображается местоположение функции

Изображение 2272

Поделиться
  • 1
    Это также доступно в IE dev tools.
6

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

Поделиться
2

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

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

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

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

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

Изображение 2273

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

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

Поделиться
0

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

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

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

Изображение 2274

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

Изображение 2275

Поделиться
0

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню