Используя Chrome, как узнать, к каким событиям привязан элемент

Предположим, у меня есть ссылка на моей странице:

<a href="#" id="foo">Click Here</a>

Я ничего не знаю, но когда я нажимаю на ссылку, alert("bar")отображается. Так что я знаю, что где-то код связан с #foo.

Как я могу найти код, который связывает alert("bar")событие click? Я ищу решение с Chrome.

Ps .: Пример вымышленный, поэтому я не ищу решение типа: «Используйте XXXXXX и ищите весь проект по« alert (\ »bar \») ». Я хочу реальное решение для отладки / трассировки.

Использование Chrome 15.0.865.0 dev . На панели «Элементы» есть раздел «Прослушиватели событий»:

И «Точки останова слушателей событий» на панели «Сценарии». Используйте точку останова Mouse -> click, а затем «переходите к следующему вызову функции», следя за стеком вызовов, чтобы увидеть, какая пользовательская функция обрабатывает событие. В идеале, вы бы заменить уменьшенную версию JQuery с unminified один , так что вы не должны шагом все время, а также использовать перешагнуть , если это возможно.

Вы также можете использовать инспектор Chrome для поиска прикрепленных событий другим способом, как показано ниже:

1. Щелкните правой кнопкой мыши на элементе для проверки или найдите его на панели «Элементы».
2. Затем на вкладке / панели «Прослушиватели событий» разверните событие (например, «нажмите»)
3. Разверните различные подузлы, чтобы найти нужный вам, а затем найдите, где находится подузел «обработчик».
4. Щелкните правой кнопкой мыши слово «функция», а затем нажмите «Показать определение функции»

Это приведет вас туда, где был определен обработчик, как показано на следующем рисунке и объяснено Полом Айришем здесь: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Попробуйте установить расширение jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), после установки выполните следующие действия:

1. Осмотрите элемент
2. На новой вкладке « Аудит jQuery » разверните свойство «События».
3. Выберите для нужного вам мероприятия
4. В свойстве обработчика щелкните правой кнопкой мыши функцию и выберите « Показать определение функции ».
5. Теперь вы увидите код привязки события
6. Нажмите на кнопку « Довольно распечатать » для более удобного просмотра кода.

(Последняя версия от 2020 г.) Для версии Chrome версии 83.0.4103.61 :

1. Выберите элемент, который вы хотите проверить

2. Выберите вкладку «Прослушиватели событий».

3. Не забудьте проверить слушатели Framework, чтобы показать реальный файл javascript вместо функции jquery.

Редактировать : вместо моего собственного ответа, этот довольно отличный: Как отлаживать привязки событий JavaScript / jQuery с помощью Firebug (или аналогичного инструмента)

Инструменты разработчика Google Chromes имеют функцию поиска, встроенную в раздел скриптов

Если вы не знакомы с этим инструментом: (на всякий случай)

• щелкните правой кнопкой мыши в любом месте страницы (в Chrome)
• нажмите «Проверить элемент»
• нажмите вкладку «Сценарии»
• Панель поиска в правом верхнем углу

Выполнение быстрого поиска #ID должно в конечном итоге привести вас к функции привязки.

Пример: поиск #fooприведет вас к

$('#foo').click(function(){ alert('bar'); })

Обновление 2018 года - может быть полезно для будущих читателей:

Я не уверен, когда это было впервые введено в Chrome. Но другой (простой) способ сделать это сейчас в Chrome - через консольные команды.

Например: ( в типе консоли Chrome )

getEventListeners($0)

Тогда как $ 0 - это выбранный элемент в DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

findEventHandlers - плагин jquery, необработанный код находится здесь: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

меры

1. Вставьте необработанный код непосредственно в консоль Chrome (примечание: должен быть уже загружен jquery)

2. Используйте следующий вызов функции: findEventHandlers(eventType, selector);
   чтобы найти соответствующий селектор соответствующего обработчика события элемента EventType.

Пример :

findEventHandlers("click", "#clickThis");

Затем, если есть, доступный обработчик событий будет показан ниже, вам нужно развернуть его, чтобы найти обработчик, щелкнуть правой кнопкой мыши по функции и выбрать show function definition

См .: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Для Chrome версии 52.0.2743.116:

1. В Инструментах разработчика Chrome откройте панель «Поиск», нажав Ctrl+ Shift+ F.

2. Введите имя элемента, который вы пытаетесь найти.

Результаты для связанных элементов должны появиться на панели и указать файл, в котором они находятся.