События и формы on JSFlow

Модель событий

Mon, 01 Jan 0001 00:00:00 +0000

Модель событий #

Событие — сигнал браузера о действии пользователя или изменении среды (клик, ввод, загрузка, изменение размера). Подписка через addEventListener связывает DOM-узел с функцией-обработчиком. Это базовый механизм кнопок плеера, переключателей виджетов и любых интерактивных элементов JSFlow.

addEventListener #

const playBtn = document.querySelector('.player__play')

function onPlayClick(event) {
 console.log('воспроизведение', event.type)
}

playBtn.addEventListener('click', onPlayClick)

Третий аргумент — опции или boolean useCapture:

document.querySelector('.modal').addEventListener(
 'keydown',
 (event) => {
 if (event.key === 'Escape') closeModal()
 },
 { once: true } // снять после первого срабатывания
)

Полезные опции:

Всплытие и делегирование

Mon, 01 Jan 0001 00:00:00 +0000

Всплытие и делегирование #

Всплытие (bubbling) — распространение события от целевого элемента вверх по DOM к document. Делегирование — один обработчик на родителе вместо сотен на строках списка. Для динамического плейлиста и таблицы заказов JSFlow это основной паттерн производительности и простоты.

Три фазы #

Capture — от window к цели (если capture: true).
Target — на элементе, где произошло действие.
Bubble — от цели вверх к document.

document.querySelector('.dashboard').addEventListener(
 'click',
 () => console.log('capture: dashboard'),
 true
)

document.querySelector('.widget').addEventListener('click', () => {
 console.log('bubble: widget')
})

Клик по кнопке внутри виджета: сначала capture на предках, затем target, затем bubble. Большинство UI-сценариев слушают фазу bubble (значение по умолчанию).

Мышь, клавиатура, pointer

Mon, 01 Jan 0001 00:00:00 +0000

Мышь, клавиатура, pointer #

События ввода переводят действия пользователя в вызовы JavaScript. Мышь и pointer покрывают указатель и тач; клавиатура — фокус и shortcuts. В JSFlow они управляют плеером, перетаскиванием виджетов дашборда и навигацией по checkout без лишних кликов.

Мышь: основные типы #

Событие	Когда срабатывает
`click`	полный цикл нажатия и отпускания на том же элементе
`dblclick`	двойной клик
`mousedown` / `mouseup`	нажатие / отпускание кнопки
`mousemove`	движение с зажатой или без кнопки
`mouseenter` / `mouseleave`	курсор вошёл / вышел из элемента (не всплывают)
`contextmenu`	правый клик

const volumeSlider = document.querySelector('.player__volume')

volumeSlider.addEventListener('click', (event) => {
 const rect = volumeSlider.getBoundingClientRect()
 const ratio = (event.clientX - rect.left) / rect.width
 setVolume(Math.min(1, Math.max(0, ratio)))
})

clientX / clientY — координаты относительно viewport; pageX / pageY учитывают прокрутку документа.

Формы и submit

Mon, 01 Jan 0001 00:00:00 +0000

Формы и submit #

Форма группирует поля ввода и отправляет их на сервер через HTTP или обрабатывает локально в JavaScript. Событие submit — точка перехвата оформления заказа: можно проверить данные, показать ошибки и отправить fetch без перезагрузки вкладки.

submit и preventDefault #

const checkoutForm = document.querySelector('#checkout-form')

checkoutForm.addEventListener('submit', async (event) => {
 event.preventDefault()

 if (!checkoutForm.reportValidity()) return

 const payload = new FormData(checkoutForm)
 await placeOrder(payload)
})

Без preventDefault браузер выполнит нативную отправку: страница перезагрузится или уйдёт на action формы.

DOMContentLoaded и загрузка

Mon, 01 Jan 0001 00:00:00 +0000

DOMContentLoaded и загрузка #

Жизненный цикл страницы определяет, когда DOM готов к поиску элементов и когда доступны изображения и subresources. Скрипты JSFlow должны инициализировать виджеты после построения дерева, но не обязаны ждать каждую картинку — для этого служат DOMContentLoaded, load и атрибуты defer / async.

DOMContentLoaded #

Срабатывает, когда HTML разобран и DOM построен, до полной загрузки стилей, изображений и iframe:

function bootDashboard() {
 mountWidgets()
 bindGlobalShortcuts()
 hydratePlaylist()
}

if (document.readyState === 'loading') {
 document.addEventListener('DOMContentLoaded', bootDashboard)
} else {
 bootDashboard()
}

Проверка readyState покрывает случай, когда скрипт подключён в конце <body> и DOM уже готов.