Событие onfocus, срабатывает после второго раза фокусировки на элементе input

Наверно проблема в событиях click и focus, что-то с очередью. Но решения не придумал.

Полей и форм будет много. Ставить обработчик на каждое поле не эффективно. Хотя работает и логика по другому сделана. Вот и решил сделать делегирование, но застрял.

Решение надо без jQuery.

Спасибо. Код + HTML

function animateLabels(e) {
        console.log(e.target);
        if (e.target.tagName == "INPUT") {
            e.target.onblur = e => {
                console.log("blur", e.target);
                if (e.target.value == "") {
                    e.target
                        .closest("span")
                        .previousSibling.classList.remove("label-top");
                }
            };
            e.target.onfocus = e => {
                console.log("focus", e.target);
                e.target.closest("span").previousSibling.classList.add("label-top");
            };
        }
    }
    document
        .querySelector(".form")
        .addEventListener("click", (e) => animateLabels(e));