Как сделать активацию функции при клике на элементы, имеющие один класс?

Question

[Кирилл]

При взятии этих элементов через document.getElementsByClassName создается список начиная с 0. Но возможно ли обратиться ко всем элементам без [x]?

Answer 1

[Антон Спирин]

var elements = document.getElementsByClassName('my-class');
Array.prototype.forEach.call(elements, function(element) {
  emement.addEventListener('click', function(e) { /* ... */ });
});

var elements = document.getElementsByClassName('my-class');
for (var i = 0; i < emements.length; i++) {
  elements[i].addEventListener('click', function(e) { /* ... */ });
}

ES6:

const elements = document.getElementsByClassName('my-class');
for (let element of elements) {
  emement.addEventListener('click', e => { /* ... */ });
}

Comments

[Кирилл]

Можно теперь объяснить что за что отвечает? Буду признателен

[Антон Спирин]

Кирилл, вызов Document.getElementsByClassName возвращает HTMLCollection. Перебрать ее можно множеством способов, как циклами for и for...of, так и методом массива Array.prototype.forEach. Для вызова этого метода на нашей коллекции, необходимо использовать метод функции call.

Answer 2

[Cr2ed]

// слушаем все клики на документе
document.addEventListener('click', (event) => {
    // проверяем наличие нужного нам класса у элемента по которому кликнули
    if (event.target.matches('.my-class')) {
        // делаем то что нам надо
    }
  
});

Comments

[Антон Спирин]

Плохой способ делегирования, не всегда работает. Пример.
Исправить можно так, но нужен полифил для closest. Ну или своя реализация.

[Cr2ed]

Антон Спирин, Согласен. Такой вариант не учел.