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 July 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 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
# handler-onblur

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
blur event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

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