Почему слетает обработчик события?

Question

[dualdeazz]

Подскажите, пожалуйста, у меня есть массив нод листа, на каждый его элемент я назначаю событие, но почему то при клике на любой из этих элементов событие срабатывает всего 1 раз, после чего сбрасывается со всех остальных элементов, в чем причина?
Вот код:

let items = document.querySelectorAll('.option-item');
for (let i = 2; i < items.length; i++) {
    if(items[i]) {
items[i].addEventListener('click',(e) => {console.log(10)});
    }
  
}

Comments

[Вадим]

В чём у Вас проблема сразу оформить вопрос как того требуют правила?

[dualdeazz]

Вадим, А что не так?

[Вадим]

dualdeazz, Не так то, что Вы даже сейчас, судя по всему, не прочли правила.
Прочитайте, в частности раздел 3, сравните со своим вопросом и сделайте вывод что не так.

[Сергей delphinpro]

В этом коде нет проблемы.
Хотя я бы записал по-другому

document.querySelectorAll('.option-item').forEach(item => {
  item.addEventListener('click', e => console.log(10));
});

[Vest]

Элементы пересоздаются? Сохраните указатель одного из них в window.globalVariable и проверьте, будет ли этот элемент ещё присутствовать в ответе вашего селектора?

[dualdeazz]

Vest, после клика событие слетает, но элемент все еще присутствует в window.globalVariable

[Vest]

dualdeazz, Я, наверное, недостаточно точно выразился. Смысл сохранения элемента в переменной, чтобы потом проверить в консоли следующие гипотезы:

• Исчезает ли обработчик события у этого элемента
  
• В новом селекторе присутствует ли этот элемент, или нет. Это важно потому, что если иерархия уделяется из DOMа, то ваши обработчики как бы для вас пропадают.
  

Answer 1

[JuniorHabr]

Код работает без ошибок, но в вашем коде навешивание событий начинает с 2. Следовательно, событие сработает начиная только с третьего элемента массива.