🤔 Какое событие сработает при потери фокуса элементом формы?Событие, которое срабатывает при потере фокуса элементом формы, называется
blur.
🚩
Почему нужно событие `blur`?Событие
blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.
Автоматическое сохранение введенных данных при переходе на другой элемент формы.
Скрытие вспомогательной информации (например, подсказок) при уходе с элемента.
blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.
🚩
Как оно работает?blur срабатывает, когда элемент теряет фокус, то есть пользователь:
Кликнул на другой элемент.
Нажал клавишу Tab, чтобы перейти на следующий элемент.
В отличие от события
focus, которое возникает при получении фокуса,
blur позволяет отследить момент завершения работы с элементом.
🚩
Как использовать `blur`?Событие можно обрабатывать с помощью:
1. HTML-атрибутов (например,
onblur).
2. JavaScript через метод
addEventListener.
Пример на практике
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример blur</title>
<script>
function validateInput(event) {
const input = event.target;
if (input.value.trim() === "") {
alert("Поле не должно быть пустым!");
}
}
document.addEventListener("DOMContentLoaded", () => {
const inputElement = document.getElementById("name");
inputElement.addEventListener("blur", validateInput);
});
</script>
</head>
<body>
<form>
<label for="name">Введите имя:</label>
<input type="text" id="name" name="name" />
<button type="submit">Отправить</button>
</form>
</body>
</html>
🚩
Особенности события `blur`🟠
Не всплываетСобытие
blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события
focusout.
// Работает только для конкретного элемента
element.addEventListener("blur", handler);
// Для делегирования используют focusout
parentElement.addEventListener("focusout", handler);
🟠
Отличие от `change`Событие
change срабатывает только после изменения значения элемента и потери фокуса, тогда как
blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.
Ставь 👍 и забирай 📚 Базу знаний 