blur (event)
Событие blur
вызывается когда элемент теряет фокус. Главное отличие между этим событием и focusout
только в том что у последнего есть фаза всплытия.
Основная информация
- Спецификация
- Интерфейс
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
<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,
);
Спецификации
Specification |
---|
UI Events # event-type-blur |
HTML Standard # handler-onblur |
Совместимость с браузерами
BCD tables only load in the browser