Всплывает ли событие focus

Всплывает ли событие focus

Нет, событие focus НЕ всплывает. Это одно из ключевых отличий в поведении события focus от других событий DOM в JavaScript. Давайте разберемся в деталях.

Что означает "всплывание события"

Всплывание (bubbling) - это процесс, при котором событие начинается у целевого элемента и поднимается вверх по дереву DOM к родительским элементам.

// Пример с события click (ВСПЛЫВАЕТ)
parent.addEventListener('click', () => {
  console.log('Click на parent');
});

child.addEventListener('click', () => {
  console.log('Click на child');
});

// При клике на child:
// "Click на child"
// "Click на parent" <- событие всплыло вверх

Событие focus - НЕ всплывает

const form = document.querySelector('form');
const input = document.querySelector('input');

// Это обработчик НЕ сработает когда пользователь сфокусируется на input
form.addEventListener('focus', () => {
  console.log('Focus на form'); // НЕ вызовется
});

// А это сработает
input.addEventListener('focus', () => {
  console.log('Focus на input'); // Сработает
});

Почему focus не всплывает

1. Логическое обоснование - focus в любой момент может быть только на одном элементе. Концепция "всплывания фокуса" не имеет смысла, так как фокус уже находится на конкретном элементе.

2. Производительность - если бы focus всплывал, это бы вызывало много событий при переводе фокуса с элемента на элемент.

3. Предсказуемость - разработчикам нужно точно знать, где находится фокус.

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

focus - НЕ всплывает

element.addEventListener('focus', () => {
  console.log('Element получил фокус');
});

blur - НЕ всплывает (противоположность focus)

element.addEventListener('blur', () => {
  console.log('Element потерял фокус');
});

focusin - ВСПЛЫВАЕТ (всплывающий вариант focus)

parent.addEventListener('focusin', () => {
  console.log('Элемент внутри parent получил фокус');
});

focusout - ВСПЛЫВАЕТ (всплывающий вариант blur)

parent.addEventListener('focusout', () => {
  console.log('Элемент внутри parent потерял фокус');
});

Практический пример с разницей

const form = document.querySelector('form');
const input = document.querySelector('input');

// Сценарий: пользователь кликнул на input

// 1. focus - НЕ всплывает
form.addEventListener('focus', () => {
  console.log('1. Focus событие'); // НЕ сработает
});

input.addEventListener('focus', () => {
  console.log('2. Focus на input'); // Сработает
});

// 2. focusin - ВСПЛЫВАЕТ
form.addEventListener('focusin', () => {
  console.log('3. Focusin на form'); // Сработает! Событие всплыло
});

input.addEventListener('focusin', () => {
  console.log('4. Focusin на input'); // Сработает
});

// Порядок вывода при фокусе на input:
// "2. Focus на input"
// "4. Focusin на input"
// "3. Focusin на form" <- событие всплыло

Как проверить, всплывает ли событие

// Свойство bubbles показывает, всплывает ли событие
const focusEvent = new FocusEvent('focus');
console.log(focusEvent.bubbles); // false

const focusinEvent = new FocusEvent('focusin', { bubbles: true });
console.log(focusinEvent.bubbles); // true

Таблица всплывающих событий

Когда использовать focusin вместо focus

// Если нужно отслеживать фокус в форме целиком
const form = document.querySelector('form');

// Плохо - не поймаешь фокус на input
form.addEventListener('focus', () => {
  form.classList.add('focused');
});

// Хорошо - поймаешь фокус на любом input
form.addEventListener('focusin', () => {
  form.classList.add('focused');
});

form.addEventListener('focusout', () => {
  form.classList.remove('focused');
});

Вывод

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