Можно ли увидеть (отладить) настраиваемые события, запускаемые из элементов DOM в браузере?
Допустим, я хочу посмотреть, какой конкретный элемент Bootstrap Collapse запускает событие show.bs.collapse, могу ли я каким-то образом увидеть его, например, в инструментах разработчика Chrome?
Прежде всего, Monitor Events будет обрабатывать это для обычных событий JS. Однако события Bootstrap являются событиями jQuery, поэтому слушатели ванильных событий JS их не слушают.
Чтобы прослушать события jQuery, запустите следующий фрагмент кода в консоли:
jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});
Замените "selected.bs.collapse" на любое событие, которое вы хотите. Когда они зарегистрированы, просто проверьте целевой элемент на событие, чтобы узнать, что его вызвало.
Теперь, наоборот, посмотреть, что слушает события. На панели элементов, если вы перейдете на вкладку прослушивателя событий и снимите флажок "предки", то вы увидите только непосредственно связанные прослушиватели событий на элементе. Таким образом, вы узнаете, что прослушивает событие, чтобы вы могли проверить, что нужно делать, когда оно запущено. Это имеет значение, так как вы можете обнаружить, что "тело" не получает событие, поскольку оно может быть отменено. Поэтому, если приведенный выше фрагмент кода не работает, необходимо проверить, нет ли пузырьков в элементе, прослушивающем событие.
Firefox предлагает "из коробки", слушатели для событий jQuery, https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
Но вы можете его расширить: http://flailingmonkey.com/view-jquery-and-jquery-live-events-in-firefox-devtools/
Вы можете использовать Visual Event 2 bookmarklet. Отличный инструмент, используемый для проверки того, какие события привязаны к конкретным элементам DOM.