DOM Advanced
События, делегирование, формы и браузерные API
Этап 8 из 8 · Продвинутый уровень
11 тем
- 01
Базовые события: addEventListener
Понять, что такое событие, как подписываться на него через addEventListener, и чем event.target отличается от event.currentTarget.
- 02
Всплытие и погружение событий
Понять, как события проходят три фазы: capture → target → bubbling, и как контролировать propagation.
- 03
Делегирование событий
Освоить паттерн делегирования: один обработчик на родителе вместо множества на дочерних элементах, с использованием event.target и data-* атрибутов.
- 04
Действия браузера по умолчанию
Научиться отменять стандартные действия браузера (переход по ссылке, отправка формы) через preventDefault и различать его с stopPropagation.
- 05
Пользовательские события
Научиться создавать и отправлять собственные события через CustomEvent, передавая данные через detail и слушая их через addEventListener.
- 06
События мыши и Drag'n'Drop
Работать с событиями мыши (click, mousedown, mousemove, mouseup), координатами (clientX/Y) и HTML Drag and Drop API.
- 07
Формы: свойства, методы, события
Работать с формами: читать и изменять value, слушать события input и change, использовать form.elements и FormData.
- 08
Отправка форм
Научиться отправлять формы через fetch: перехватить submit, собрать данные (FormData или JSON), отправить запрос и обработать ответ.
- 09
События клавиатуры
Работать с keydown/keyup, различать event.key и event.code, использовать модификаторы (ctrl, shift, alt, meta) и связать с accessibility.
- 10
Размеры элементов и прокрутка
Различать clientWidth/Height, offsetWidth/Height, scrollWidth/Height, и использовать getBoundingClientRect для позиционирования относительно viewport.
- 11
MutationObserver, выделение текста и Event Loop
Наблюдать за изменениями DOM через MutationObserver, работать с выделением текста через Selection API, и понять порядок выполнения: синхронный код → microtasks → tasks.