Как посмотреть event listener в chrome
Перейти к содержимому

Как посмотреть event listener в chrome

  • автор:

Chrome DevTools: Show the function definition of registered event listeners on any element

DevTools can show you JavaScript event listeners which are registered on elements. For example a click handler registered with .addEventListener() .

DevTools can also take you to the exact line of code where the event is registered, which makes it useful when debugging from the outside in.

How to use this feature

  1. Inspect an element in the Elements Panel
  2. Navigate to the Event Listeners Pane in the Elements Panel
  3. Browse the events registered on any node. You can view the source of an event listener by selecting Show Function Definition in the context menu

Reminder

As a heads-up, browser extensions often apply event listeners to elements in the page, so you may see code from other sources when browsing the Event Listeners Pane.

Extra resources

I’ve added additional information on debugging event listeners in DevTools in the View and remove JavaScript event listeners tip.

Получаем список обработчиков элемента в DOM’е

Допустим, что у нас есть элемент на странице. Пусть это будет div . Наша задача — получить все обработчики этого элемента. Рассмотрим варианты решения этой задачи в различных браузерах, а именно IE , Firefox , Chrome . В каждом современном браузере в консоли разработчка есть специальный UI для этих целей. Например в Chrome это DevTools -> Elements -> Выбрать интересующий DOM узел -> Вкладка Event Listeners . В нашем случае, поговорим о получании списка обработчиков программно.

  • Использовать метод getEventListeners(target) . В браузере Chrome (является методом DevTools API) этот метод работает без лишних телодвижений — возвращает объект-массив эвентов на целевом элементе.
  • Ситуация с Firefox немного сложнее. Данный метод доступен после установки Firebug GetEventListeners.
  • В IE все совсем плохо, т.к такой метод не реализован в API консоли разработчика и нет extensions с его аналогами (я таких не нашел).

Итак, мы выяснили, что метод getEventListeners не является кроссбраузерным и является частью Developer Console API, поэтому рассмотрим следующий костыль вариант решения. Для этого нам придется переопределить нативные методы Element.prototype.addEventListener и Element.prototype.removeEventListener (для старых версий IE нужно переопределить свои аналоги) своими кастомными реализациями которые будут отслеживать event listeners .

See the Pen RNzGwj by Alex Filatov (@greybax) on CodePen.

  • Это единственный способ получить все обработчики событий (в том числе, зарегистрированные сторонними библиотеками, например, jQuery )
  • Cкрипт, который выполняет переопределение, должен быть выполнен первым — до jQuery/Prototype/ и др., т.к иначе event listeners , зарегистрированные через эти сценарии будут не отражены.

Можно ничего не писать и использовать сторонние реализации функции, например эту.

Минусы:

  • Плагин, в состоянии обнаружить и получить обработчики событий, зарегистрированные только через jQuery .
  • Завязан на jQuery версии >=1.8.

Итог

Универсального (кроссбраузерного) и по-настоящему хорошего варианта, к сожалению, сейчас не существует.

Как найти функцию обработки события onchange или другого события?

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

Я хочу посмотреть как обрабатываются события нажатия кнопки. Каким образом мне можно найти эту функцию onchange=»selmarshClick(this)» ?

Отслеживать
73.7k 12 12 золотых знаков 93 93 серебряных знака 182 182 бронзовых знака
задан 14 авг 2017 в 8:45
227 2 2 серебряных знака 9 9 бронзовых знаков
ctrl+f — по файлам
14 авг 2017 в 8:47

Возможно среда разработки, которую вы используете позволяет осуществлять поиск функции кликнув по ним мышью с нажатием какой-то клавиши на клавиатуре (нужно смотреть применительно к среде разработке) ну или описанный выше способ

14 авг 2017 в 8:49
Я рассматриваю сайт в браузером окне.
14 авг 2017 в 8:53

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Если нажать F12 в Chrome и зайти на вкладку Sources , то можно увидеть панель со вкладками, которые помогают при отладке. Одной из таких вкладок будет Event Listener Breakpoints , в которой можно назначить в качестве триггера любые события, при которых исполнение скрипта будет остановлено. Выбирай на вкус.

В данном случае нужно будет выбрать Control → change

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

Для Firefox нужно зайти в Инспектор, найти тот самый элемент, в котором прописано событие и обнаружить рядом значок em :

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

Кликнув на него, как утверждает developer.mozilla.org/ru/docs можно увидеть строчки:

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

где можно увидеть события, навешанные на элемент, скрипт, строку, возможность нажать на паузу и т.д.

Если в Firefox нет кнопки паузы, как обещают, то можно попробовать посмотреть во вкладку Debugger (отладчик) и попробовать найти стрелку, при наведении на которую будет написано «Events». Там уже должно быть событие этого элемента.

А вот таких полезных вкладок как у Chrome к сожалению у Firefox я не вижу.

Как в дебаггере Chrome получить используемую функцию в Event Listeners?

ece39516adc349eca8fbeace58cd6bb1.png

Проблема такова. Например, используется jQuery. В отдельном файле навешивается событие click на кнопку. В хрома я не могу найти свою функцию примененную к элементу — я лишь вижу функцию используемую в jQuery. В отличие от хрома, в FireFox, с использованием FireBug, мою функцию прекрасно видно. Каким образом в хроме можно добиться подобного результата?

  • Вопрос задан более трёх лет назад
  • 4524 просмотра

Комментировать

Решения вопроса 0

Ответы на вопрос 1

wanhelsing

Vadim @wanhelsing

Получить или посмотреть, какие листенеры навешаны? Посмотреть можно на закладке Event Listeners:

chrome-event-listenres.png

Ответ написан более трёх лет назад

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *