Как узнать, какие события JavaScript были запущены?

У меня есть список выбора:

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

Когда я выбираю Closed, страница перезагружается. В этом случае он показывает закрытые билеты (а не открытые). Он отлично работает, когда я делаю это вручную.

Проблема в том, что страница не перезагружается, когда я выбираю Closed с помощью Watir:

browser.select_list(:id => "filter").select "Closed"

Это обычно означает, что какое-то событие JavaScript не запускается. Я могу запускать события с помощью Watir:

browser.select_list(:id => "filter").fire_event "onclick"

но мне нужно знать, какое событие нужно запустить.

Есть ли способ узнать, какие события определены для элемента?

Ответ 1

Похоже, Firebug (надстройка Firefox) имеет ответ:

открыть Firebug
щелкните правой кнопкой мыши элемент на вкладке HTML
нажмите Log Events
включить вкладку Консоль
перейдите на вкладку "Сохранять на консоли" (иначе вкладка "Консоль" будет очищена после перезагрузки страницы).
выберите Closed (вручную)

на вкладке Консоль будет что-то подобное:

...
mousemove clientX=1097, clientY=292
popupshowing
mousedown clientX=1097, clientY=292
focus
mouseup clientX=1097, clientY=292
click clientX=1097, clientY=292
mousemove clientX=1096, clientY=293
...

Источник: Совет Firebug: события журнала

Ответ 2

Просто подумал, что добавлю, что вы можете сделать это и в Chrome:

Ctrl + Shift + I (Инструменты разработчика)> Источники> Точки останова прослушивателя событий (справа).

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

Например:

Щелкните правой кнопкой мыши на кнопке upvote слева

Выберите элемент проверки

Свернуть раздел стилей (крайний правый раздел - двойной шеврон)

Разверните параметр прослушивателей событий

Теперь вы можете видеть события, связанные с upvote

Не уверен, что он такой же мощный, как опция firebug, но этого было достаточно для большинства моих вещей.

Еще один вариант, который немного отличается, но удивительно удивительный, это Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2

Он выделяет все элементы на странице, которые были связаны, и имеет всплывающие окна, показывающие вызываемые функции. Довольно изящный для закладки! Также есть плагин для Chrome, если вам больше нравится - не уверен насчет других браузеров.

AnonymousAndrew также указал monitorEvents(window); здесь

Ответ 3

Что касается Chrome, проверьте файл monitorEvents() через API командной строки.

Откройте консоль через меню > Инструменты > Консоль JavaScript.
Введите monitorEvents(window);

Просмотр консоли, заполненной событиями

...
mousemove MouseEvent {dataTransfer: ...}
mouseout MouseEvent {dataTransfer: ...}
mouseover MouseEvent {dataTransfer: ...}
change Event {clipboardData: ...}
...

В документации есть другие примеры. Я предполагаю, что эта функция была добавлена после предыдущего ответа.

Ответ 4

Вы можете использовать getEventListeners в своей консоли разработчика Google Chrome.

getEventListeners (object) возвращает прослушиватели событий, зарегистрированные на указанный объект.

getEventListeners(document.querySelector('option[value=Closed]'));