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