How to hang focus action on child elements in js?

Question

JavaScript

Hello
, I would like to add a class after the focus is removed from the form, but the focus of the parent does not extend to the child elements, and therefore, after the user enters the input text and clicks on the free part of the site, nothing happens, I would like the focus to work parent and on child elements, i used focusout, blur but nothing worked, does anyone know?

Here is the form

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

here is 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');
      }
    });
  }
}

and tabindex="0"you can remove.

Answer 2

The parameter trueallows you to monitor all "passing by" events.

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