Как связана по логике работа click с onfocus?

Как связана по логике работа click с onfocus

Определение и различие

click и onfocus — это два разных события в JavaScript, которые срабатывают в разных ситуациях. Важно понимать различие между ними, чтобы правильно обрабатывать взаимодействие пользователя с элементами.

Событие click

click срабатывает, когда пользователь нажимает (и отпускает) мышь или нажимает Enter на фокусированном элементе:

// HTML
<button id="myButton">Click me</button>
<input id="myInput" type="text" />

// JavaScript
const button = document.getElementById('myButton');

// Событие click
button.addEventListener('click', (event) => {
  console.log('Button was clicked!');
  console.log('Event type:', event.type); // 'click'
  console.log('Click coordinates:', event.clientX, event.clientY);
});

// click можно срабатить программно
button.click(); // Эмулирует клик пользователя

Событие onfocus (focus)

focus срабатывает, когда элемент получает фокус. Это происходит когда:

• Пользователь кликает на элемент
• Пользователь нажимает Tab
• Элемент получает фокус программно через JavaScript

const input = document.getElementById('myInput');

// Событие focus
input.addEventListener('focus', (event) => {
  console.log('Input received focus!');
  console.log('Event type:', event.type); // 'focus'
  event.target.style.borderColor = 'blue';
});

// focus можно установить программно
input.focus(); // Даёт фокус элементу

Порядок событий при клике

Это критически важно понимать: при клике на интерактивный элемент сначала срабатывает focus, потом click:

const input = document.getElementById('myInput');

input.addEventListener('focus', () => {
  console.log('1. Focus event');
});

input.addEventListener('click', () => {
  console.log('2. Click event');
});

// Когда пользователь кликает на input:
// Вывод в консоль:
// 1. Focus event
// 2. Click event

Практический пример: взаимодействие click и focus

<form id="myForm">
  <input type="text" id="userName" placeholder="Enter your name" />
  <input type="email" id="email" placeholder="Enter your email" />
  <button type="button" id="submitBtn">Submit</button>
</form>

<script>
// Обработчик focus для input
const userName = document.getElementById('userName');

userName.addEventListener('focus', (e) => {
  console.log('Input focused');
  e.target.style.backgroundColor = '#f0f0f0';
});

userName.addEventListener('blur', (e) => {
  console.log('Input lost focus');
  e.target.style.backgroundColor = 'white';
});

// Обработчик click для кнопки
const submitBtn = document.getElementById('submitBtn');

submitBtn.addEventListener('click', (e) => {
  console.log('Button clicked');
  // Фокусируемся на первый input
  userName.focus(); // Это вызовет 'focus' event на input
});

// Сценарий пользователя:
// 1. Кликает на input -> focus + click
// 2. Нажимает Tab -> blur на input + focus на email
// 3. Кликает на кнопку -> focus на кнопке + click на кнопке
</script>

Различие в элементах

Не все элементы могут получать фокус:

// Элементы, которые по умолчанию могут быть в фокусе
// (focusable elements):
const focusableElements = [
  '<button>',
  '<input>',
  '<textarea>',
  '<select>',
  '<a href="...">',
  '<area>',
  '<audio controls>',
  '<video controls>',
  '<iframe>',
  '[tabindex]', // Любой элемент с tabindex
];

// Для обычного div с click, но без фокуса
const div = document.querySelector('div');

div.addEventListener('click', () => {
  console.log('Div was clicked');
});

// Для добавления фокуса обычному элементу
div.setAttribute('tabindex', '0');

div.addEventListener('focus', () => {
  console.log('Div focused');
});

Сложный пример: интерактивная форма

<form id="contactForm">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" />
  </div>
  <div class="form-group">
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" />
  </div>
  <div class="form-group">
    <label for="message">Message:</label>
    <textarea id="message"></textarea>
  </div>
  <button type="submit" id="submit">Send</button>
</form>

<script>
const form = document.getElementById('contactForm');
const fields = form.querySelectorAll('input, textarea');
const submitBtn = document.getElementById('submit');

let focusedField = null;

// Отслеживаем, какое поле в фокусе
fields.forEach((field) => {
  field.addEventListener('focus', (e) => {
    focusedField = e.target;
    console.log('Field focused:', e.target.id);
    e.target.style.borderColor = 'blue';
  });

  field.addEventListener('blur', (e) => {
    console.log('Field lost focus:', e.target.id);
    e.target.style.borderColor = 'gray';
    focusedField = null;
  });

  // Click не обязательно вызывает click handler,
  // если это input — он просто получает фокус
  field.addEventListener('click', (e) => {
    console.log('Field clicked:', e.target.id);
  });
});

// Кнопка Submit
submitBtn.addEventListener('focus', () => {
  console.log('Submit button focused');
  submitBtn.style.outline = '2px solid orange';
});

submitBtn.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('Form submitted');
  
  // Сохраняем данные и возвращаем фокус на первое поле
  form.reset();
  fields[0].focus(); // Это вызовет focus event
});
</script>

Логическая связь между click и focus

// Сценарий 1: Click на input
const input = document.querySelector('input');

input.addEventListener('focus', () => {
  console.log('Step 1: Focus received');
  // Подготавливаем поле для ввода
  input.style.backgroundColor = 'lightyellow';
});

input.addEventListener('click', () => {
  console.log('Step 2: Click detected');
  // Делаем что-то специфичное для клика
  input.select(); // Выбираем текст в input
});

// Порядок:
// 1. Пользователь кликает на input
// 2. Браузер вызывает focus event (если input не был в фокусе)
// 3. Браузер вызывает click event

// Сценарий 2: Tab на input (без click)
const previousInput = document.querySelector('input:first-of-type');
const nextInput = document.querySelector('input:last-of-type');

previousInput.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    // Браузер автоматически переместит фокус на nextInput
    // focus event будет вызван, но click НЕ будет
    console.log('User pressed Tab, focus will move to next input');
  }
});

Практическое применение

// Практический пример: Поле с подсказкой
<div class="form-group">
  <input type="text" id="email" placeholder="Enter email" />
  <div id="hint" class="hint" style="display: none;">
    Example: user@example.com
  </div>
</div>

<script>
const emailInput = document.getElementById('email');
const hint = document.getElementById('hint');

// Показываем подсказку когда поле в фокусе
emailInput.addEventListener('focus', () => {
  hint.style.display = 'block';
});

// Скрываем подсказку когда фокус уходит
emailInput.addEventListener('blur', () => {
  hint.style.display = 'none';
});

// Обработаем click для дополнительной логики
emailInput.addEventListener('click', () => {
  // Если текст уже есть, выбираем его
  if (emailInput.value) {
    emailInput.select();
  }
});
</script>

Итоговая связь

click и focus — разные события, но они связаны логически:

1. Focus — состояние элемента (он может быть в фокусе или нет)
2. Click — действие (пользователь нажал на элемент)

При клике на интерактивный элемент (input, button и т.д.):

• Сначала срабатывает focus (если элемент не был в фокусе)
• Затем срабатывает click

Это важно помнить для правильного порядка обработки событий. Часто focus используется для UI подготовки (показ подсказок, выделение поля), а click — для выполнения действия (отправка формы, переход по ссылке).