07 Модуль - DOM. События -- 04 События

Question 1

События используются для

Answer 1

реакции на действия посетителя и исполнения кода. Cобытия становятся в очередь и обрабатываются в порядке поступления

Question 2

Существует много видов событий, рассмотрим некоторые из них.

Answer 2

click - происходит, когда кликнули на элемент левой кнопкой мыши
submit - посетитель отправил форму
focus - посетитель фокусируется на элементе, например нажимает на input
keydown - посетитель нажимает клавишу

Question 3

Каждое событие обрабатывается ………..

Answer 3

независимо

Question 4

Для того чтобы элемент реагировал на действия пользователя, на него необходимо

Answer 4

повесить слушателя (обработчик) события. То есть функцию, которая сработает как только событие произошло. Именно благодаря слушателям событий, скрипт может реагировать на действия пользователя.

Question 5

Сколько обработчиков можно использовать на одном типе события?

Answer 5

Сколько угодно обработчиков на одном типе события.

Question 6

addEventListener и this

Answer 6

Если мы передаем функцию которая использует this, по умолчанию this внутри нее будет ссылаться на сам DOM-узел на котором висит слушатель. Не забывайте привязывать контекст используя метод bind.

Question 7

Метод elem.removeEventListener()

Answer 7

Для удаления нужно передать ссылку именно на ту функцию-обработчик, которая была назначена в addEventListener. Поэтому для callback используют отдельную функцию и передают ее по имени.

Question 8

Для отмены действия браузера по умолчанию, на объекте события есть метод. Что за метод?

Answer 8

event.preventDefault()

Question 9

Событие submit возникает при

Answer 9

отправке формы. Его применяют для валидации (проверки) формы перед отправкой. Чтобы отправить форму, у посетителя есть два способа:

Нажать кнопку с type=”submit”
Нажать клавишу Enter, находясь в каком-нибудь поле формы

Question 10

Есть три основных события клавиатуры:

Answer 10

keydown, keypress и keyup.

Question 11

Есть три события клавиатуры: keydown, keypress и keyup. Расскажи про их очередность.

Answer 11

При нажатии клавиши сначала происходит keydown, после чего keypress, и только потом keyup, когда клавишу отжали.

Question 12

Срабатывают на каких клавишах? События keydown, keypress и keyup?

Answer 12

События keydown и keyup срабатывают при нажатии любой клавиши, включая служебные. А вот keypress срабатывает только если нажата символьная клавиша, т. е. нажатие приводит к появлению символа. Управляющие клавиши, такие как Ctrl, Shift, Alt и другие, не генерируют событие keypress.

Question 13

События элементов форм - Фокусировка

Answer 13

клавиши Tab или выбрав на планшете.

Question 14

При фокусировке(нажатии на нем мышкой) на элемент происходит событие

Answer 14

focus.

Активировать фокус elem.focus()

Question 15

когда фокус исчезает, например посетитель кликает в другом месте экрана, происходит событие

Answer 15

blur.

Отменить фокус можно программно, вызвав в коде метод elem.blur() у элемента.

Question 16

Событие submit возникает при

Answer 16

отправке формы. Его применяют для валидации (проверки) формы перед отправкой. Чтобы отправить форму, у посетителя есть два способа:

Нажать кнопку с type=”submit”
Нажать клавишу Enter, находясь в каком-нибудь поле формы

Question 17

Свойство KeyboardEvent.code представляет собой

Answer 17

физическую клавишу на клавиатуре (в отличие от символа, сгенерированного нажатием клавиши). Другими словами, это свойство возвращает значение, которое не изменяется с помощью раскладки клавиатуры или состояния клавиш-модификаторов.

Question 18

Свойство KeyboardEvent.key

Answer 18

доступно для чтения и возвращает значение клавиши, нажатой пользователем, принимая во внимание состояние клавиш модификаторов, таких как shiftKey, а так же текущий язык и модель клавиатуры.

Question 19

Событие change

Answer 19

Происходит по окончании изменения элемента формы, когда изменение зафиксировано. Для input:text или textarea, событие произойдёт не при каждом вводе, а при потере фокуса, что не всегда удобно.

Например, пока вы набираете что-то в текстовом поле — события нет. Но как только фокус пропал, произойдет событие change. Для остальных же элементов, например select, input:checkbox и input:radio, оно срабатывает сразу при выборе значения.

Question 20

Событие input

Answer 20

Срабатывает только на текстовых элементах, input:text и textarea, при изменении значения элемента. Не ждет потери фокуса, в отличие от change.

В современных браузерах input — самое главное событие для работы с текстовым элементом формы. Именно его, а не keydown или keypress, следует использовать.

Question 21

event.currentTarget - элемент,

Answer 21

на котором сработал обработчик

Question 22

event.target - элемент,

Answer 22

на котором произошло событие

Question 23

DOMContentLoaded происходит на

Answer 23

document когда все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.
Если в документе есть теги script, то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.

Question 24

load событие срабатывает на

Answer 24

window, когда загружается вся страница, включая ресурсы на ней — стили, картинки и т.д. Его используют редко, поскольку обычно нет нужды ждать загрузки всех ресурсов.

Question 25

unload

Answer 25

Когда человек уходит со страницы или закрывает окно, на window срабатывает событие unload. В нём можно сделать что-то, не требующее ожидания, например, закрыть вспомогательные popup-окна, но отменить сам переход нельзя. Событие почти не используется — мало что можно сделать, зная, что вкладка браузера сейчас закроется.

Question 26

beforeunload

Answer 26

Событие срабатывает на window. Это стандарт для того, чтобы проверить, сохранил ли посетитель данные, действительно ли он хочет покинуть страницу.

Если посетитель инициировал переход на другую страницу или нажал закрыть окно, то обработчик beforeunload может приостановить процесс и спросить подтверждение.