Применить js-код ко всем классам в html

Question

Сделал анимацию для кнопки с помощью css и js. Продублировав эту кнопку в одном общем диве несколько раз, анимация остается только для первой кнопки в диве. Как применить js-код для всех кнопок с одним классом ('.link__item')?

js

    const btn = document.querySelector('.link__item');
    btn.onmousemove = function(e){
      const x = e.pageX - btn.offsetLeft;
      const y = e.pageY - btn.offsetTop;

      btn.style.setProperty('--x', x + 'px');
      btn.style.setProperty('--y', y + 'px');
    }

Пробовал через querySelectorAll, не получилось(

Answer 1

Если использовать устаревший способ назначения обработчиков событий через свойства DOM-атрибутов on<eventType> (как в коде из вопроса):

const onLinkItemMouseMove = function (e) {
  /* ..тело функции обработчика.. */
};
for (const btn of document.querySelectorAll('.link__item'))
  btn.onmousemove = onLinkItemMouseMove;

Если использовать современный способ обработки событий через слушатели, с методом addEventListener:

const onLinkItemMouseMove = function (e) {
  /* ..тело функции обработчика.. */
};
for (const btn of document.querySelectorAll('.link__item'))
  btn.addEventListener('mousemove', onLinkItemMouseMove);

Если использовать делегирование обработки событий и современный способ с методом addEventListener - полезно когда однотипные элементы добавляются в документ динамически:

document.body.addEventListener('mousemove', function (e) {
  if (!e.target.matches('.link__item')) return;
  /* ..остальное тело функции обработчика.. */
});

В первых двух случаях, желательно объявить функцию обработчика событий вне цикла, как показано на примерах - потому что если разместить функциональное выражение внутри цикла, оно будет создавать новый объект функции на каждой итерации (это не имеет смысла, когда код обработчиков одинаковый).

Третий случай использует механизм распространения событий, называемый всплытием (event bubbling) - стоит учесть, что это применимо не во всех случаях, так как не все события всплывают (mousemove всплывает, а вот например focus - нет).

БЛОГ НА HUSL

Применить js-код ко всем классам в html

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