blur (event)

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

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

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

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 (en-US) на true:

HTML Content

html

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

JavaScript Content

js

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

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

Specification
UI Events
# event-type-blur
HTML Standard
# handler-onblur

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

BCD tables only load in the browser

Похожие события