focusin focusout или focus blur

В JavaScript события focusin, focusout, focus и blur используются для отслеживания изменения фокуса на элементах формы. Вот их основные характеристики и различия:

1. focus

• Описание: Событие focus срабатывает, когда элемент получает фокус.
• Применение: Обычно используется для выполнения действий, когда элемент становится активным, например, для изменения стиля или отображения подсказки.
• Пример:
  const inputField = document.getElementById('myInput');
  
  inputField.addEventListener('focus', function() {
  console.log('Поле ввода получило фокус');
  });

2. blur

• Описание: Событие blur срабатывает, когда элемент теряет фокус.
• Применение: Используется для выполнения действий, когда элемент больше не активен, например, для валидации введенных данных или скрытия подсказки.
• Пример:
  inputField.addEventListener('blur', function() {
  console.log('Поле ввода потеряло фокус');
  });

3. focusin

• Описание: Событие focusin срабатывает, когда элемент получает фокус, но в отличие от focus, оно также срабатывает для дочерних элементов, когда фокус перемещается на них.
• Применение: Полезно для отслеживания фокуса на группе элементов, например, в контейнере с несколькими полями ввода.
• Пример:
  const container = document.getElementById('myContainer');
  
  container.addEventListener('focusin', function() {
  console.log('Один из элементов контейнера получил фокус');
  });

4. focusout

• Описание: Событие focusout срабатывает, когда элемент теряет фокус, и, как и focusin, оно также срабатывает для дочерних элементов.
• Применение: Полезно для отслеживания потери фокуса на группе элементов.
• Пример:
  container.addEventListener('focusout', function() {
  console.log('Один из элементов контейнера потерял фокус');
  });

Основные отличия

• События focus и blur: Срабатывают только для конкретного элемента и не учитывают дочерние элементы.
• События focusin и focusout: Срабатывают для элемента и его дочерних элементов, что позволяет отслеживать фокус в пределах контейнера.

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