DOM & Basic events Flashcards
Global object
Глобальный объект - это объект, который всегда существует в глобальной области видимости.
В веб-браузере любой код, который не запускается скриптом явно как фоновую задачу, имеет Window в качестве своего глобального объекта.
Доступ к любым Глобальным Переменным или функциям может быть получен как к свойствам объекта window.
Это включает в себя как встроенные объекты, например, Array, так и характерные для окружения свойства, например, window.innerHeight – высота окна браузера.
Accessing the global object
Глобальный объект имеет универсальное имя – globalThis.
Но чаще на него ссылаются по-старому, используя имя, характерное для данного окружения, такое как window (браузер) и global (Node.js).
Для того, чтобы код был проще и в будущем его легче было поддерживать, следует обращаться к свойствам глобального объекта напрямую, как window.x.
Var for global object
В браузерах, если только мы не используем модули, глобальные функции и переменные, объявленные с помощью var, становятся свойствами глобального объекта.
DOM
Document Object Model – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.
Спецификация DOM описывает структуру документа и предоставляет объекты для манипуляций со страницей. Существуют и другие, отличные от браузеров, инструменты, использующие DOM. Например, серверные скрипты, также могут использовать DOM.
Window
window выступает в 2 ролях:
- Это глобальный объект для JavaScript-кода.
- Он представляет собой окно браузера и располагает методами для управления им.
DOM event
Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).
Most common events
События мыши:
- click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
- contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
- mouseover / mouseout – когда мышь наводится на / покидает элемент.
- mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
- mousemove – при движении мыши.
События на элементах управления:
- submit – пользователь отправил форму <form>.
- focus – пользователь фокусируется на элементе, например нажимает на <input></input>.
Клавиатурные события:
- keydown и keyup – когда пользователь нажимает / отпускает клавишу.
События документа:
- DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.
CSS events:
- transitionend – когда CSS-анимация завершена.
Event listeners
element.addEventListener(event, handler, [options]);
event - имя события.
handler - ссылка на функцию-обработчик.
options (false/true) - дополнительный объект со свойствами:
- once: если true, тогда обработчик будет автоматически удалён после выполнения.
- capture: фаза, на которой должен сработать обработчик.
- passive: если true, то указывает, что обработчик никогда не вызовет preventDefault().
Для удаления слушателя через removeEventListener нужно передать именно ту функцию-обработчик которая была назначена.
Event object
Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику - event.
Basic event types
- Mouse events (MouseEvent): mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu
- Touch events (TouchEvent): touchstart, touchmove, touchend, touchcancel
- Keyboard events (KeyboardEvent): keydown, keypress, keyup
- Form events: focus, blur, change, submit
- Window events: scroll, resize, hashchange, load, unload
Mouse events
dblclick - двойное нажатие кнопки указывающего устройства; то есть, когда она быстро щелкается дважды на одном элементе в течение очень короткого периода времени.
mousedown - кнопка указывающего устройства нажата над элементом.
mouseenter - когда указательное устройство изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.
mouseleave - когда курсор манипулятора перемещается за границы элемента.
mousemove - когда указывающее устройство перемещается, пока точка доступа курсора находится внутри него.
mouseout - когда указывающее устройство используется для перемещения курсора так, чтобы он больше не находился внутри элемента или одного из его дочерних элементов.
mouseover - когда указывающее устройство используется для перемещения курсора на элемент или один из его дочерних элементов.
mouseup - когда кнопка на устройстве указания отпускается, когда указатель находится внутри него.
Keyboard events
Keydown - срабатывает, когда клавиша была нажата.
Keyup - срабатывает, когда клавиша была отпущена.
Form events
Submit - событие отправки формы.
Reset - событие очистки полей формы.
Invalid - срабатывает при попытке отправить форму, когда одно или несколько полей формы неверно заполнены.
Input events
Input — событие ввода.
Change — событие изменения input (срабатывает после изменения поля и потери фокуса).
Focus — выбор элемента, фокус.
Blur — потеря фокуса.
Select — выделение текста.
Keyup — событие отпускание кнопки.
Contextmenu — правый щелчок мыши.
Event phases
По стандарту DOM Events 3 фазы прохода события:
- Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
- Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
- Фаза всплытия (bubbling stage) – событие начинает всплывать.
