Как найти в чужом коде вызываемую по событию javascript-функцию?

Question

[Хайбулла Мусаев]

Уважаемые, пришлось по проекту править малоизученный javascript.

Есть сторонний ресурс, на коем имеется javascript-механизм, абсолютно удовлетворяющий моим текущим нуждам - по клику один слой заменяется другим. Механика простая, решил залезть в код, найти функцию, которую повесили на ссылку. Так как дело с javascript имел давно, предполагал увидеть что-то вроде:

<a href="#" onClick="javascript:socialSwitch(select);">link</a>

но увидел

<a class="switcher toggle_active" href="https://www.facebook.com/299609513866" 
rel="external nofollow" target="_blank">Facebook</a>

Полез гуглить, какие существуют способы повесить событие на ссылку. Нашел, что можно повесить функцию по id-шнику. Это понятно. Но здесь даже id-шника нет.

Теперь главный вопрос темы - уважаемые javascript-разработчики, если Вам приходится разбирать чужой код, как Вы быстро определяете, в каком месте и какая функция обрабатывает тот или иной event?..

Мне ни одной хитрости в голову не пришло. Только полным перебором по коду пробежаться, заглядывая во все javascript-файлы.

Answer 1

[amygdala]

На самом деле все можно сделать проще
Для хрома есть такой extension, как Visual Event.

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

Answer 2

[Александр Литвинов]

Через dev tools можно.
Небольшой курс
Ставите Event Listener Breakpoints на клик, и при выполнении клика, браузер остановится и покажет место в коде.

Answer 3

[Сергей Протько]

Сначала идет выборка по селектору... У ссылки есть класс switcher, который как бы намекает что по нему скорее всего и ищут. Либо же по toggle_active, либо по их комбинации. Словом в данном случае нужно определять наиболее вероятную часть селектора и дальше банальный поиск по исходникам (искать в ручную даже на небольших проектах дико долго). 99% что там используется jQuery, так что дальше два варианта. Результат выборки по селектору записыватеся в переменную, либо же напрямую к коллекции применяется функция on('click'), вешающая обработчик.

Что бы было удобнее, обычно селекторы вешаются на data-* атрибуты. Например добавить функционал на селектор [data-switcher] и внутри уже разбираться что свитчить и как.

Comments

[Юрий Лобанов]

@Fesor то есть никакой firebug или другие инспекторы кода не показывают, какие события навешаны? И теоретически - это трудно реализовать? Предположим, ищем все события, которые навешиваются в js, сравниваем с селекторами в html и составляем список совпадений, нет?
Я почему спрашиваю - сам ищу вручную, иногда поиском по коду. Но всегда думал, что просто не разобрался по-хорошему с возможностями firebug.

[Сергей Протько]

на счет фаербагов не знаю, но в хроме можно ставить бряки на изменение элемента (модификацию атрибутов и т.д.) и таким образом находить то место в коде, которое что-то меняет по клику. Именно посмотреть обработчики событий можно (вкладка event listeners в разделе elements), но если там используется jquery то уже довольно проблематично.

[Юрий Лобанов]

@Fesor о, спасибо!