Как обратиться ко всем элементам через querySelectorAll?

Question

[Ivan Gvrl]

Добрый день.

Не могу победить querySelectorAll.
Идея такая - есть блоки, при наведении на них должен выхватываться скрытый в них элемент и привязываться к движению курсора. С первым найденным элементом срабатывает, с остальными нет. Пробовал использовать addEventListenerAll с перебором, но не выходит.

Вот тут мой пример на codepen

<div class="block">
  <img class="block2">
</div>
<br>
<div class="block">
  <img class="block2">
</div>

.block2 {
     display: none;
     background-color: black;
     margin-right:10px;
     width: 100px;
     height: 50px;
     position: absolute;
}

.block {
     background-color: red;
     width: 1000px;
     height: 100px;
}

.block:hover .block2 {
     display: block;
}

document.querySelector('.block').addEventListener('mousemove', function(e) {
  Object.assign(document.querySelector('img').style, {
    left: `${e.layerX+30}px`,
    top: `${e.layerY+30}px`,
  });
})

Comments

[Антон Литвиненко]

зато как приятно делать это на джейквери

Answer 1

[goshaLoonny]

Можно реализовать циклом, но не рекомендую так как если DOM дерево обновится (например, вы добавите новый элемент) вам придется искать его и ручками добавлять ему слушатель. А так как вы добавляли слушатели циклом то соответственно функция обработчик вероятнее всего анонимная. По этому придется еще и функцию выносить в необходимую область видимости.
Лучше вешать слушатель на родителя и проверять таргет.
Например, у вас есть много элементов с классом block, значит вешать слушатель стоит на их родителя, предположим что он имеет класс wrapper

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

document.querySelectorAll('.wrapper').addEventListener('mousemove', e => {
  if (!e.target.classList.contains('block')) return; // Если элемент который вызвал это событие не имеет класса block, то отправляем return, тем самым код ниже выполнятся не будет

  // тут писать код который будет выполнятся если элемент который вызвал это событие имеет класса block

})

Comments

[Ivan Gvrl]

Добрый. Да, такой вариант тоже хороший, спасибо!

Answer 2

[Elvis]

Может дело в том что addEventListenerAll не существует?

Comments

[Ivan Gvrl]

Извиняюсь, имел ввиду querySelectorAll . Устал уже..

[Elvis]

Ладно, делаешь document.querySelectorAll('.block')
Перебираешь в цикле и вешаешь листнер.
...
Profit!

P. S.: гуглится за 10 секунд.

[Ivan Gvrl]

Elvis, Спасибо ) Я уже так пробовал, но у меня чего-то не получается ( Буду еще конечно пробовать

[Elvis]

Что-то типо такого(с телефона не очень удобно):

let blocks = document.querySelectorAll('.block');
for(let x of blocks) {
x.addEventListener('mousemove', function(e) {
  Object.assign(x.querySelector('img').style, {
    left: `${e.layerX+30}px`,
    top: `${e.layerY+30}px`,
  });
})
}

[Ivan Gvrl]

Elvis, Супер! Только "}" добавить осталось в конце! Все заработало! Надо мне усерднее javascript учить )
Может однажды смогу так же кодить! Спасибо большое! :)

[goshaLoonny]

Ivan Gvrl, Не нужно цикла, посмотрите мой ответ.