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

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

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

javascript events watir dom-events browser-automation Желько Филиппин
источник
В этом вопросе перечислены дополнительные инструменты: 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
    источник