MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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

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

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

Свойства

Свойство Тип Описание
target Только для чтения EventTarget Цель события (самая важная в дереве DOM).
type Только для чтения DOMString Тип события.
bubbles Только для чтения Boolean Будет ли событие нормально бить
cancelable Только для чтения Boolean Отменяемо ли событие?
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);

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 (Да)[1] 6 12.1 5.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 53 ? 10.0 12.1 5.1

[1] В Gecko до 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) интефейс для этого события был Event, не FocusEvent. Смотреть (баг 855741).

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

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: Pirate505, Asyst
 Обновлялась последний раз: Pirate505,