Как применять функцию ко всем div с id/class?

Question

[Иван]

Нужно при нажатии, перемещении и отпуске на div происходили разные функции.
div с одинаковым id/class много и нужно чтоб к каждому были одинаковые функции.
пробовал, но addEventListener работает только с 1 div

Comments

[Kovalsky]

"div с одинаковым id" - такого быть не может. Суть идентификатора именно в том, что он уникальный, поэтому одинаковые идентификаторы использовать нельзя

Answer 1

[Иван Клименко]

function handler(e) {
    // ...
}

document.addEventListener('event-type', event => {
    if (event.target.classList.contains('my-class')) {
        handler(event);
    }
});

Comments

[Дмитрий Беляев]

потеряли объект ивента и насоздавали 100500 однотипных функций... хороший совет однако...

[Иван Клименко]

Дмитрий Беляев, поправил

[Mikhail Osher]

Иван Клименко, всё равно много обработчиков

[Иван Клименко]

Mikhail Osher, допустим, но если стоит задача слушать слушать события на каждом элементе, то как её решать по-другому?

[Mikhail Osher]

Иван Клименко, повесить один обработчик на document и проверять event.target. Таким образом, можно сколько угодно добавлять/убирать элементы в DOM, всё будет нормально вызываться.

[Иван Клименко]

Mikhail Osher, звучит разумно, сейчас ещё раз поправлю ответ

[Mikhail Osher]

Иван Клименко, это не совсем обязательно делать. Порой можно и пожить с десятком-вторым обработчиков. Я бы не сказал, что будет фантастический выигрыш в производительности. Имхо, по-правильному, нужно вешать обработчик на ближайшего общего родителя группы элементов, чтобы не ловить клики по всему приложению.

[Mikhail Osher]

Иван Клименко, можно ещё писать `event.target.matches(".my-class")` вместо `event.target.classList.contains('my-class')`.

[Иван Клименко]

Mikhail Osher, на самом деле всё, кажется, зависит от конкретной ситуации. Ближайшим общим родителем может ведь только body и оказаться. Возможно попробую проверить разные подходы.

Про matches() не знал, спасибо