Чи можу я знайти події, пов'язані на елементі з jQuery?

Я пов'язую два обробники подій за цим посиланням:

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

У сучасних версіях 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 ви можете клацнути правою кнопкою миші функцію обробника та натиснути "Перегляд визначення функції", щоб показати точне місце, де це визначено у вашому коді.

Загальний випадок:

• Натисніть, F12щоб відкрити Dev Tools
• Перейдіть на Sourcesвкладку
• Праворуч прокрутіть вниз до Event Listener Breakpointsі розгорніть дерево
• Клацніть на події, які ви хочете слухати.
• Взаємодійте з цільовим елементом, якщо вони стрілять, ви отримаєте точку злому в налагоджувачі

Аналогічно можна:

• клацніть правою кнопкою миші на цільовому елементі -> виберіть " Inspect element"
• Прокрутіть вниз праворуч рамку розробника, внизу - ' event listeners'.
• Розгорніть дерево, щоб побачити, які події додаються до елемента. Не впевнений, чи це працює для подій, які обробляються через бульбашку

Я додаю це для нащадків; Існує простіший спосіб, який не передбачає написання більше JS. Використовуючи дивовижний додаток firebug для firefox ,

1. Клацніть правою кнопкою миші на елементі та виберіть "Оглянути елемент за допомогою Firebug"
2. На панелях бічної панелі (показано на скріншоті) перейдіть до вкладки подій за допомогою крихітної стрілки>
3. На вкладці події відображаються події та відповідні функції для кожної події
4. Текст поруч із ним показує розташування функції

Тепер ви можете просто отримати список слухачів подій, пов'язаних з об'єктом, за допомогою функції javascript getEventListeners ().

Наприклад, введіть наступне на консолі інструментів розробки:

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

JQuery Audit плагін плагін повинен дозволити вам зробити це з допомогою звичайних інструментів Chrome Dev. Це не ідеально, але він повинен дозволяти вам бачити фактичний обробник, прив'язаний до елемента / події, а не лише загальний обробник jQuery.

Хоча це не зовсім конкретно для селекторів / об’єктів jQuery, у FireFox Quantum 58.x ви можете знайти обробників подій на елементі за допомогою інструментів Dev:

1. Клацніть елемент правою кнопкою миші
2. У контекстному меню натисніть "Перевірити елемент"
3. Якщо поруч із елементом (жовте поле) є значок 'ev', натисніть на значок 'ev'
4. Відображає всі події для цього елемента та обробника подій

Я використовував щось подібне, якщо (. якщо мій елемент пов'язаний з якоюсь подією. Він все одно буде визначатись невизначеним (null), якщо ви додали до цього елемента всі обробники подій. Ось чому я оцінюю це в виразі if.

Зауважте, що події можуть бути додані до самого документа, а не до елемента, про який йде мова. У такому випадку вам потрібно використовувати:

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

І знайдіть подію за допомогою правильного селектора :

А потім подивіться на обробник > [[FunctionLocation]]

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

Тому мені довелося використовувати дані $ ._ на батьківському діві: $._data($('#outerWrap')[0], 'events')щоб побачити події для тегів. Ось JSFiddle для того ж: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/