# События формы

## focus <a href="#fokusirovka" id="fokusirovka"></a>

Элемент получает фокус при нажатии на нем мышкой, клавиши `Tab` или выбрав на планшете.&#x20;

При фокусе на элементе мы можем подгрузить данные для автозаполнения или начать отслеживать изменения в них.&#x20;

По умолчанию многие элементы не могут получить фокус. Например, если кликнуть по `div`, то фокусировка на нем не произойдет. Кстати, фокус может быть только на одном элементе в единицу времени и текущий элемент, на котором фокус, доступен как `document.activeElement`.

## blur

Когда фокус исчезает с элемента или переключается на другой, например посетитель кликает в другом месте экрана, происходит событие `blur`.

При потере фокуса можно валидировать введенные данные.

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

## change <a href="#sobytie-change" id="sobytie-change"></a>

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

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

### input <a href="#sobytie-input" id="sobytie-input"></a>

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

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

### submit <a href="#sobytie-submit" id="sobytie-submit"></a>

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

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

Какой бы способ ни выбрал посетитель – будет сгенерировано событие `submit`. В обработчике этого события можно проверить данные и выполнить действия по результатам проверки.

[Ссылка на пример в Codepen.io](https://codepen.io/goit-fe-adv/pen/YxmgPV/)