Почему событие onclick не всегда срабатывает с первого раза?

Question

[BuBux]

Есть форма с кнопкой отправки. На кнопку повесил событие "click".

document.querySelector('#goy').addEventListener('click', (event) => {
    event.preventDefault();
    console.log('submit ');
});

У формы есть поля, на которых также висят обработчики событий "focusin", "focusout". Обработчик для одного из полей:

name.addEventListener("focusin", (event) => {
    removeError(event.currentTarget.id);
});

name.addEventListener("focusout", (event) => {
    name.value = name.value.replace(/\s/g, '');

    if (name.value === '') {
        return name.insertAdjacentHTML('afterend',
            errorTextTemplate("name_error", "Заполните поле"));
    }
});

Вспомогательные функции, которые встречаются в коде выше:

const errorTextTemplate = (id, text) => {
    return `<label for="${id}" class="danger" id="${id}">${text}</label>`;
}

const removeError = (id) => {
    let elem = document.querySelector(`#${id}_error`);

    if (elem) elem.remove();
};

Суть вопроса: Если установить курсор в поле с id "name", а затем сразу отправить форму, то обработчик события на отправку формы не всегда срабатывает с первого раза(в консоле сообщение submit).
P.S. Если я уберу обработчики события focusout, focusin то всё вроде как работает корректно. Но мне необходимы данные обработчики