Окно: событие blur

Событие blur срабатывает, когда элемент теряет фокус.

Противоположностью blur является focus.

Это событие не отменяемо и не распространяется.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика событий.

addEventListener("blur", (event) => {});

onblur = (event) => {};

A FocusEvent. Наследует от UIEvent и Event.

Этот интерфейс также наследует свойства от своего родительского UIEvent и косвенно от Event.

FocusEvent.relatedTarget

An EventTarget представляющий вторичную цель для этого события. В некоторых случаях (например, при переключении ввода с помощью клавиши Tab), это свойство может быть установлено в null по соображениям безопасности.

В этом примере внешний вид документа изменяется при потере фокуса. Он использует addEventListener() для отслеживания focus и blur событий.

HTML

<p id="log">Click on this document to give it focus.</p>

CSS

.paused {
  background: #ddd;
  color: #555;
}

JavaScript

function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

const log = document.getElementById("log");

window.addEventListener("blur", pause);
window.addEventListener("focus", play);

Результат

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

• Связанное событие: focus
• Это событие на Element цели: blur событие