event.target в JavaScript

Свойство event.target хранит элемент, на котором началось событие. Оно полезно, когда один обработчик должен понять, какой именно элемент вызвал его.

Например, обработчик можно назначить форме, а пользователь будет менять разные поля внутри неё. Через event.target код узнает, какое поле изменилось, и прочитает его данные.

• Что хранится в event.target
• Один обработчик для формы
• Данные из изменённого поля
• event.target и event.currentTarget в форме
• Событие submit
• Итого

Что хранится в event.target

Браузер задаёт event.target в момент, когда происходит событие. Если пользователь изменил select, свойство укажет на этот select. Если отметил чекбокс - на чекбокс.

Элемент в target не меняется, пока событие передаётся к родителям. Поэтому обработчик на форме может узнать, какое из вложенных полей вызвало событие.

Один обработчик для формы

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

<form class="appearance-settings">
  <fieldset>
    <legend>Тема</legend>

    <label>
      <input type="radio" name="theme" value="light" checked>
      Светлая
    </label>

    <label>
      <input type="radio" name="theme" value="dark">
      Тёмная
    </label>
  </fieldset>

  <label>
    Размер текста
    <select name="fontSize">
      <option value="small">Маленький</option>
      <option value="medium" selected>Средний</option>
      <option value="large">Большой</option>
    </select>
  </label>

  <label>
    <input type="checkbox" name="notifications">
    Получать уведомления
  </label>
</form>

<p class="setting-message" aria-live="polite"></p>

const appearanceSettings = document.querySelector('.appearance-settings');
const settingMessage = document.querySelector('.setting-message');

appearanceSettings.addEventListener('change', function (event) {
  const field = event.target;

  if (field.name === 'notifications') {
    settingMessage.textContent = field.checked
      ? 'Уведомления включены'
      : 'Уведомления выключены';

    return;
  }

  settingMessage.textContent = 'Изменено поле «' + field.name + '»: ' + field.value;
});

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

Данные из изменённого поля

У элемента из event.target можно читать обычные свойства поля:

• event.target.name - имя поля из HTML-атрибута name;
• event.target.value - выбранное или введённое значение;
• event.target.checked - отмечен ли чекбокс или radio-кнопка.

В примере у чекбокса важно использовать checked. Его value обычно не сообщает, включил пользователь уведомления или выключил.

event.target и event.currentTarget в форме

В этом обработчике два свойства указывают на разные элементы:

appearanceSettings.addEventListener('change', function (event) {
  console.log(event.target); // input или select, который изменили
  console.log(event.currentTarget); // form.appearance-settings
});

event.target отвечает на вопрос, какое поле вызвало событие. event.currentTarget - на каком элементе сейчас работает обработчик. Если нужно изменить саму форму, обращайтесь к event.currentTarget.

Если обработчик назначен непосредственно полю, event.target и event.currentTarget будут ссылаться на один элемент. Разница появляется, когда событие приходит от вложенного элемента.

Событие submit

Не у каждого события target будет полем. Событие submit возникает у формы, даже если пользователь отправил её кнопкой. Поэтому в обработчике submit event.target - это сама форма.

appearanceSettings.addEventListener('submit', function (event) {
  console.log(event.target === appearanceSettings); // true
});

Не используйте event.target в обработчике submit, чтобы определить кнопку отправки. Это свойство показывает элемент, у которого возникло событие, а не элемент, по которому пользователь кликнул раньше.

Итого

event.target даёт доступ к элементу, вызвавшему событие. В обработчике на форме через него удобно узнать изменённое поле и прочитать его name, value или checked. Сам элемент с обработчиком доступен через event.currentTarget.