Ошибка, при попытке повесить обработчик
 

Здравствуйте. Подскажите пожалуйста, пытаюсь повесить обработчик на событие "blur" на инпате и получаю ошибку.
Хотя обработчик на "фокус" срабатывает нормально. Вот код:

window.addEventListener('DOMContentLoaded', (e) => {
    let controls = document.getElementsByClassName('input__control');
    for(let i = 0;  i<controls.length; i++){
        controls[i].addEventListener('focus', (e)=>{
            let input = e.target.closest('.input');
            input.classList.add("input_focused");            
            console.log(controls[i]);//Тест
            controls[i].addEventListener("blur", (e)=>{
                controls.log('111');//Тест               
            })
        })
    }
});

Вот HTML:

<span class="input input_size-l search__input">
          <span class="input__box">
                  <input class="input__control" placeholder="Что ищите?" name="search" id="search" value="">
            </span>
</span>

Решил вот так:

window.addEventListener('DOMContentLoaded', (e) => {
    let controls = document.getElementsByClassName('input__control');
    for(let i = 0;  i<controls.length; i++){
        controls[i].addEventListener('focus', (e)=>{
            let input = e.target.closest('.input');
            if(!input.classList.contains("input_focused")){
                input.classList.add("input_focused");
            }
        });
        controls[i].addEventListener('blur', (e)=>{
            let input = e.target.closest('.input');
            if(input.classList.contains("input_focused")){
                input.classList.remove("input_focused");
            }
        })
    }
});

Но все ранво не могу понять, почему в первом примере не вешался обработчик:(

controls.log('111');//Тест
9 строка нет на винде такого метода

первый пример полная хрень, вешать новый обработчик при каждом событии фокус.

Да уж=))Спасибо за то, что тыкнули
Спасибо за пояснение, только учусь, действительно ерундово вышло:thanks: