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

122

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

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

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

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

— Желько Филиппин
источник

В этом вопросе перечислены дополнительные инструменты: stackoverflow.com/questions/570960/…

— eljko Filipin

2

Визуальное событие, sprymedia.co.uk/article/Visual+Event . Я уверен, что это поможет половине людей попасть на эту страницу stackoverflow :)

— Седрик

143

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

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

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

Например:

Щелкните правой кнопкой мыши кнопку голосования слева.

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

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

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

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

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

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

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

Анонимный Андрей также указал здесь monitorEvents(window);

— Крис
источник

2

Я не мог понять, как узнать, какие события сработали, с помощью любого из предложенных вами способов.

— eljko Filipin

1

Обновление: его нет Scriptsв инструментах Dev (или инспекторе), вам нужно войти, Sourcesа затем посмотреть на меню справа.

— aledalgrande

@aledalgrande Спасибо, обновили. (Для всех, кто читает, это относится только к первому решению, второе по-прежнему использует инспектор).

— Крис

1

Есть ли конкретная причина, по которой вы выбрали для этого кнопку «За»? : P

— Георгий Димитриадис

@GeorgeDimitriadis, ха-ха: П

— Крис,

112

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

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

во вкладке Console будет что-то вроде этого:

...
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 Совет: журнал событий

— Желько Филиппин
источник

4

Большое спасибо, я не знал об этой функции Firebug. Возможно, мне нужно время на RTFM.

— Марсель Корпель,

Я не знал об этом всего несколько минут назад. Я писал вопрос и по ходу находил ответ. :)

— eljko Filipin

2

Недавняя запись в блоге разработчика Firebug: softwareishard.com/blog/firebug/firebug-tip-log-dom-events

— jakub.g

1

Привет, я попытался щелкнуть правой кнопкой мыши по firebug, но не могу найти параметр «Журнал событий». Не могли бы вы помочь мне, как его найти?

— Rajagopalan

2

Привет, плагина Firbug больше нет. Тогда как мне этого добиться? Пожалуйста, помогите мне

— HimaaS

71

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

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

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

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

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

— AnonymousAndrew
источник

5

Ницца! Совместно с jQuery:monitorEvents($('#element').get())

— Klaus

1

Для того, чтобы прекратить использование мониторингаunmonitorEvents(window)

— Augustas

0

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

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

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

— JSON C11
источник