Элемент: событие focusout

Событие focusout срабатывает, когда элемент теряет фокус после события blur. Различие между этими событиями заключается в том, что focusout распространяется вверх по DOM, а blur — нет.

Противоположностью focusout является событие focusin, которое срабатывает, когда элемент получает фокус.

Событие focusout не является отменяемым.

Синтаксис

Используйте имя события в методах, таких как addEventListener().

addEventListener("focusout", (event) => {});

Тип события

Тип FocusEvent. Наследуется от UIEvent и Event.

Свойства события

Этот интерфейс также наследует свойства от своего родительского UIEvent и косвенно от Event.

FocusEvent.relatedTarget: Элемент, получающий фокус, если таковой имеется.

Примеры

Живой пример

HTML

<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});

Результат

Спецификации

Спецификация
События UI # event-type-focusout

Примечание: Спецификация Событий UI описывает порядок событий фокусировки, который отличается от того, что реализуют текущие браузеры.

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`focusout_event`	1 Свойство обработчика событий `onfocusout` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusout', function() {});`.	12 Свойство обработчика событий `onfocusout` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusout', function() {});`.	52 Свойство обработчика событий `onfocusout` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusout', function() {});`.	11.6	5	18 Свойство обработчика событий `onfocusout` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusout', function() {});`.	52 Свойство обработчика событий `onfocusout` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusout', function() {});`.	12.1	4.2	1.0 Свойство обработчика событий `onfocusout` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusout', function() {});`.	≤37

См. также

Связанные события: blur, focus, focusin
Фокусировка: focus/blur

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event