Как добавить событие фокуса на динамические элементы?

Доброго времени суток!

Раньше использовал только jQuery, но сейчас решил попробовать чистый JS.
И столкнулся с проблемой добавления события focus на динамически создаваемые элементы.

Задача такая.
Есть один textarea, при фокусе на него, ниже должен добавиться такой же пустой textarea, при клике на следующий — еще один и так далее.

Помучил Google, понял что повесить событие на focus нельзя, проблему решил так:
document.querySelector('.item-fields').addEventListener('click', function (e) {
     if (e.target.tagName === 'TEXTAREA') {
          let wrapFields = e.target.closest('.item-fields');
          let cloneField = e.target.closest('.item').cloneNode(true);
          cloneField.querySelector('.task-title').value = '';
          wrapFields.append(cloneField);
     }
});

Но теперь мне нужно сделать так, чтобы при потере фокуса textarea - отправлялся запрос на сервер для сохранения. Но никак не могу понять, как мне поймать событие focus? Сейчас, когда клик после textarea, e.type = 'click'.
  • Вопрос задан
  • 104 просмотра
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
К чёрту focus, используйте focusin, оно всплывает, в отличие от.
Ответ написан
Комментировать
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
document.querySelector('.item-fields').addEventListener('focusin', function (e) {
  // Элемент в фокусе
});
document.querySelector('.item-fields').addEventListener('focusout', function (e) {
  // Элемент потерял фокус
});


Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы