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

Question

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

<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"

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

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

Answer 1

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

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

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

Например:

Щелкните правой кнопкой мыши на кнопке upvote слева Выберите элемент проверки Свернуть раздел стилей (крайний правый раздел - двойной шеврон) Расширить опцию прослушивателей событий Теперь вы можете видеть события, связанные с upvote

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

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

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

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

Answer 2

Похоже, 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: Журнал событий

Answer 3

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

• Откройте консоль через Меню> Инструменты> Консоль JavaScript.
• Enter monitorEvents(window);

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

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

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