События, связанные с фокусом

При получении элементом фокуса браузер запускает событие "focus". Когда он теряет фокус, запускается событие "blur".

В отличие от предыдущих событий, эти два не распространяются. Обработчик родительского узла не уведомляется о получении или утрате фокуса дочерним элементом.

Следующий пример демонстрирует текст подсказки для того текстового поля, у которого в данный момент фокус.

<p>Имя: <input type="text" data-help="Ваше полное имя"></p>

<p>Возраст: <input type="text" data-help="Возраст в годах"></p>

<p id="help"></p>

<script>

  var help = document.querySelector("#help");

  var fields = document.querySelectorAll("input");

  for (var i = 0; i < fields.length; i++) {

    fields[i].addEventListener("focus", function(event) {

      var text = event.target.getAttribute("data-help");

      help.textContent = text;

    });

    fields[i].addEventListener("blur", function(event) {

      help.textContent = "";

    });

  }

</script>

Объект window получает события focus и blur, когда пользователь выделяет или убирает фокус с закладки браузера или окна браузера, в котором показан документ.