07 Модуль - DOM. События -- 04 События Flashcards
События используются для
реакции на действия посетителя и исполнения кода. Cобытия становятся в очередь и обрабатываются в порядке поступления
Существует много видов событий, рассмотрим некоторые из них.
click - происходит, когда кликнули на элемент левой кнопкой мыши
submit - посетитель отправил форму
focus - посетитель фокусируется на элементе, например нажимает на input
keydown - посетитель нажимает клавишу
Каждое событие обрабатывается ………..
независимо
Для того чтобы элемент реагировал на действия пользователя, на него необходимо
повесить слушателя (обработчик) события. То есть функцию, которая сработает как только событие произошло. Именно благодаря слушателям событий, скрипт может реагировать на действия пользователя.
Сколько обработчиков можно использовать на одном типе события?
Сколько угодно обработчиков на одном типе события.
addEventListener и this
Если мы передаем функцию которая использует this, по умолчанию this внутри нее будет ссылаться на сам DOM-узел на котором висит слушатель. Не забывайте привязывать контекст используя метод bind.
Метод elem.removeEventListener()
Для удаления нужно передать ссылку именно на ту функцию-обработчик, которая была назначена в addEventListener. Поэтому для callback используют отдельную функцию и передают ее по имени.
Для отмены действия браузера по умолчанию, на объекте события есть метод. Что за метод?
event.preventDefault()
Событие submit возникает при
отправке формы. Его применяют для валидации (проверки) формы перед отправкой. Чтобы отправить форму, у посетителя есть два способа:
Нажать кнопку с type=”submit”
Нажать клавишу Enter, находясь в каком-нибудь поле формы
Есть три основных события клавиатуры:
keydown, keypress и keyup.
Есть три события клавиатуры: keydown, keypress и keyup. Расскажи про их очередность.
При нажатии клавиши сначала происходит keydown, после чего keypress, и только потом keyup, когда клавишу отжали.
Срабатывают на каких клавишах? События keydown, keypress и keyup?
События keydown и keyup срабатывают при нажатии любой клавиши, включая служебные. А вот keypress срабатывает только если нажата символьная клавиша, т. е. нажатие приводит к появлению символа. Управляющие клавиши, такие как Ctrl, Shift, Alt и другие, не генерируют событие keypress.
События элементов форм - Фокусировка
клавиши Tab или выбрав на планшете.
При фокусировке(нажатии на нем мышкой) на элемент происходит событие
focus.
Активировать фокус elem.focus()
когда фокус исчезает, например посетитель кликает в другом месте экрана, происходит событие
blur.
Отменить фокус можно программно, вызвав в коде метод elem.blur() у элемента.
Событие submit возникает при
отправке формы. Его применяют для валидации (проверки) формы перед отправкой. Чтобы отправить форму, у посетителя есть два способа:
Нажать кнопку с type=”submit”
Нажать клавишу Enter, находясь в каком-нибудь поле формы
Свойство KeyboardEvent.code представляет собой
физическую клавишу на клавиатуре (в отличие от символа, сгенерированного нажатием клавиши). Другими словами, это свойство возвращает значение, которое не изменяется с помощью раскладки клавиатуры или состояния клавиш-модификаторов.
Свойство KeyboardEvent.key
доступно для чтения и возвращает значение клавиши, нажатой пользователем, принимая во внимание состояние клавиш модификаторов, таких как shiftKey, а так же текущий язык и модель клавиатуры.
Событие change
Происходит по окончании изменения элемента формы, когда изменение зафиксировано. Для input:text или textarea, событие произойдёт не при каждом вводе, а при потере фокуса, что не всегда удобно.
Например, пока вы набираете что-то в текстовом поле — события нет. Но как только фокус пропал, произойдет событие change. Для остальных же элементов, например select, input:checkbox и input:radio, оно срабатывает сразу при выборе значения.
Событие input
Срабатывает только на текстовых элементах, input:text и textarea, при изменении значения элемента. Не ждет потери фокуса, в отличие от change.
В современных браузерах input — самое главное событие для работы с текстовым элементом формы. Именно его, а не keydown или keypress, следует использовать.
event.currentTarget - элемент,
на котором сработал обработчик
event.target - элемент,
на котором произошло событие
DOMContentLoaded происходит на
document когда все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.
Если в документе есть теги script, то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.
load событие срабатывает на
window, когда загружается вся страница, включая ресурсы на ней — стили, картинки и т.д. Его используют редко, поскольку обычно нет нужды ждать загрузки всех ресурсов.
unload
Когда человек уходит со страницы или закрывает окно, на window срабатывает событие unload. В нём можно сделать что-то, не требующее ожидания, например, закрыть вспомогательные popup-окна, но отменить сам переход нельзя. Событие почти не используется — мало что можно сделать, зная, что вкладка браузера сейчас закроется.
beforeunload
Событие срабатывает на window. Это стандарт для того, чтобы проверить, сохранил ли посетитель данные, действительно ли он хочет покинуть страницу.
Если посетитель инициировал переход на другую страницу или нажал закрыть окно, то обработчик beforeunload может приостановить процесс и спросить подтверждение.
