Как узнать, какие события 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]'));