Как повесить действие фокуса и на дочерних элементов в js?

Question

[Томас Джефферсон]

Здраствуйте
Я бы хотел добавить класс после того как с формы удалиться фокус, но фокус родителя не распространяется на дочерние элементы, и поэтому после того как пользователь ввел в инпут тексе и нажал на свободную часть сайта ничего не происходит, мне бы хотелось что бы действовал фокус родителя и на дочерних элементах, я использовал focusout, blur но ничего не получилось, кто нибудь знает?

Вот форма

<form action="#">
      <div class="form_block" tabindex="0">
         <input type="text" id="fred">
         <div class="text-arr"></div>
      </div>
</form>

вот js

$('form_block').on("focusout", ()=>{
         $('form_block').addClass('dd')
      })

Answer 1

[Александр]

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

for (const element of form.elements) {
	const wrapper = element.closest('.form_block');
	if (wrapper !== null) {
		element.addEventListener('blur', (event) => {
			if (!wrapper.contains(event.relatedTarget)) {
				wrapper.classList.add('dd');
			}
		});
	}
}

и tabindex="0" убрать можно.

Answer 2

[Aetae]

Параметр true позволяет следить за всеми "проходящими мимо" событиями.

form.addEventListener('blur', e => console.log('скоро уйдём с элемента', e.target, 'формы', form), true)