blur (event)

Событие blur вызывается когда элемент теряет фокус. Главное отличие между этим событием и focusout только в том что у последнего есть фаза всплытия.

Основная информация

Спецификация: DOM L3
Интерфейс: FocusEvent (en-US)
Всплытие: Нет
Отменяемый: Нет
Цель: Элемент
Действие по умолчанию: Нет

Примечание:

Значение Document.activeElement меняется в зависимости от браузера во время выполнения этого события (баг 452307): IE10 устанавливает его к элементу на который будет перемещён фокус, в то время как Firefox и Chrome обычно устанавливают его к body документа

Свойства

Property	Type	Description
`target` Только для чтения	`EventTarget`	Event target (DOM element)
`type` Только для чтения	`DOMString`	The type of event.
`bubbles` Только для чтения	`Boolean`	Whether the event normally bubbles or not.
`cancelable` Только для чтения	`Boolean`	Whether the event is cancellable or not.
`relatedTarget` Только для чтения	`EventTarget` (DOM element)	null

Делегирование события

Есть два способа реализовать делегирование этого события: использовать событие focusout в браузерах которые поддерживают его (все браузеры, Firefox с 52+), или установить параметр "useCapture" метода addEventListener на true:

HTML Content

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript Content

var form = document.getElementById("form");
form.addEventListener("focus", function( event ) {
  event.target.style.background = "pink";
}, true);
form.addEventListener("blur", function( event ) {
  event.target.style.background = "";
}, true);

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

BCD tables only load in the browser