Событие blur вызывается когда элемент теряет фокус. Главное отличие между этим событием и focusout только в том что у последнего есть фаза всплытия.
Основная информация
- Спецификация
- DOM L3
- Интерфейс
FocusEvent- Всплытие
- Нет
- Отменяемый
- Нет
- Цель
- Элемент
- Действие по умолчанию
- Нет
Примечание: Значение
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 на 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);
Совместимость с браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| 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).