Почему сгенерированный HTML элемент не получает событие

Question

Вопрос всего один, почему созданный SPAN НЕ получает событие.

    const title = document.querySelector('.title');
// const h1 = document.querySelector('.h1');
const span = document.querySelectorAll('.span');


const str = 'Slovo'
const anim = [...str];




anim.forEach(e => {
    title.innerHTML += `<span class="span">${e}</span>`
});

span.forEach((e) => {
    e.addEventListener('mouseover', () => {
        console.log('yes');
        e.classList.toggle('span__active');
    })
})

Answer 1

Всё просто и логично: потому что событие навешивается до создания элемента и оно о нём ничего не знает. Поэтому надо на вновь созданный элемент навешивать обработчик. Либо выключать обработчик у всех и включать на все заново (что иногда проще). Либо воспользоваться делегированием события, т.е. когда событие навешивается на какого-либо родителя, который никогда не изменяется

Подробнее о делегировании

Answer 2

Потому что querySelectorAll возвращает не живую коллекцию.

Вместо этого можно воспользоваться getElementsByTagName

const span = document.getElementsByTagName('span');

const str = 'Slovo'
const anim = [...str];

anim.forEach(e => {
  title.innerHTML += `<span class="span">${e}</span>`
});

for (var i = 0; i < span.length; i++) {
  const e = span[i];
  e.addEventListener('mouseover', () => {
    console.log('yes');
    e.classList.toggle('span__active');
  })
}

.span__active {
  background: red;
}

<div id="title"></div>

БЛОГ НА HUSL

Почему сгенерированный HTML элемент не получает событие

Ответы (2 шт):