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

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


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

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

    0

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

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

    getEventListeners(document.querySelector('option[value=Closed]'));
    Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
    Licensed under cc by-sa 3.0 with attribution required.