Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Дополняет доку про change #5517

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+16 −2
Open

Дополняет доку про change #5517

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5b14e58
Дополняет страницу про `change`
ra1nbow1 Sep 26, 2024
162f9ff
Слегка редачит
TatianaFokina Oct 1, 2024
ab7d15f
Навёрстывает упущенное
TatianaFokina Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions js/event-change/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,29 @@ title: "`change`"
description: "Работаем со значением, когда пользователь зафиксирует свои изменения."
authors:
- kejjero
- ra1nbow1
related:
- js/events
- html/form
- js/deal-with-forms
tags:
- doka
- placeholder
---

## Кратко

Событие `change` срабатывает, когда пользователь изменяет значение в `<input>`, [`<select>`](/html/select/) или [`<textarea>`](/html/textarea/) и фиксирует свои изменения.
Событие `change` срабатывает, когда пользователь изменяет значение в [`<input>`](/html/input/), [`<select>`](/html/select/) или [`<textarea>`](/html/textarea/) и фиксирует свои изменения.

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

## Когда использовать

В текстовых полях (`<input>`, `<textarea>`), когда нужно получить окончательное значение после завершения ввода.

В выпадающих списках (`<select>`), если пользователь выбрал новое значение из дропдауна с доступными опциями.

Чекбоксы и радиокнопки (`<input type="checkbox">`, `<input type="radio">`), когда состояние переключается между «выбрано» и «не выбрано». Например, при отправке формы или при взаимодействии с выбором нескольких значений (чекбоксы или выпадающие списки).

## Как пишется

```js
Expand All @@ -28,12 +36,18 @@ input.addEventListener('change', function (event) {
})
```

В этом примере мы выбираем элемент с классом `.input` с помощью `document.querySelector()`. Используя метод `addEventListener`, мы привязываем обработчик события `change` к элементу. Этот обработчик будет вызываться, когда событие произойдет. Внутри функции мы можем получить новое значение элемента с помощью `event.target.value`. Это значение будет отображено в консоли после изменения и подтверждения ввода пользователем.

## Пример

💡 В зависимости от указанного типа в HTML-элементе, `change` срабатывает по-разному. Легче всего это понять на примере.

<iframe title="Демонстрация работы события" src="demos/index"></iframe>

## Отличие от события `input`

Хотя оба события могут использоваться для отслеживания изменений в полях ввода, между ними есть важное различие. Событие `input` срабатывает на каждое изменение содержимого (при каждом нажатии клавиши). Событие `change` срабатывает только тогда, когда ввод завершён, и пользователь покинул элемент ввода или подтвердил выбор.

## Как понять

Подробнее о механизме событий читай в статье «[Событийная модель](/js/events)».
Expand Down
Loading