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

Question

[Лев Салатов]

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

Раньше использовал только 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'.

Comments

[szQocks]

blur ?

[Лев Салатов]

szQocks, да, название событие знаю. Но куда мне его повесить? В примере выше
cloneField. addEventListener('blur'...
не срабатывает

[szQocks]

Лев Салатов, если изначально отображается один textarea то вешать надо на него, и при каждом появлении нового тега textarea вешать уже на них тоже, вообще задача очень странная, не думаю что на это стоит тратить время, ерундой заниматься

просто вложенные textarea вообще вроде как не должно работать это + при потере фокуса - запрос, мда уж

P.S а туплю, там написано что не в нём, а ниже

[Лев Салатов]

szQocks, пример функциональности беру из Google Keep

Answer 1

[0xD34F]

К чёрту focus, используйте focusin, оно всплывает, в отличие от.

Answer 2

[Сергей delphinpro]

document.querySelector('.item-fields').addEventListener('focusin', function (e) {
  // Элемент в фокусе
});
document.querySelector('.item-fields').addEventListener('focusout', function (e) {
  // Элемент потерял фокус
});