blur (event)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

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

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

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

ЗначениеDocument.activeElement меняется в зависимости от браузера во время выполнения этого события (Firefox bug 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

html

<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,);