Как навесить обработчик на коллекцию элементов?

Question

[dm]

У меня на странице несколько ссылок с одинаковым классом. Мне нужно всем сделать всплывающее окно по нажатию. Пытаюсь им всем отменить действие по умолчанию таким кодом:

var buttonItem = document.querySelectorAll('.button-item');
buttonItem.addEventListener('click', function(event) {
	event.preventDefault();
});

В консоли ошибка: Uncaught TypeError: buttonItem.addEventListener is not a function
Если поиск только 1-го селектора querySelector('.button-item'), то он находится

Пробовал еще так:

var buttonItem = document.getElementsByClassName('.button-item');
buttonItem.addEventListener('click', function(event) {
	event.preventDefault();
});

Та же ошибка.

Как правильно сделать?

Answer 1

[Алексей Уколов]

Проблема в том, что вы пытаетесь навесить обработчик на коллекцию элементов, которая возвращается функцией querySelectorAll. Такой возможности нет, нужно обходить эту коллекцию и навешивать обработчик на каждый элемент отдельно:

var buttonItems = document.querySelectorAll('.button-item'),
    index, button;

for (index = 0; index < buttonItems.length; index++) {
    button = buttonItems[index];
    button.addEventListener('click', function (event) {
        console.log('click');
        event.preventDefault();
    });
}

Пример

Обратите внимание, что такой способ установки обработчика в цикле не очень хорош - при каждой итерации создается новая функция-обработчик, что засоряет память и этот обработчик невозможно потом удалить, поскольку создаваемая функция безымянна и ссылка на нее нигде не сохраняется.
Ну в принципе такой код не очень опрятный.

Лучше делать так:

var buttons = document.querySelectorAll('.button-item'),
    index, button;

for (index = 0; index < buttons.length; index++) {
    button = buttons[index];
    button.addEventListener('click', clickHandler);
    button.addEventListener('dblclick', doubleClickHandler);
}

function clickHandler(event) {
    console.log('click', this.innerText);
    event.preventDefault();
}

function doubleClickHandler(event) {
    console.log('doubleclick', this.innerText);
    this.removeEventListener('click', clickHandler);    
    this.removeEventListener('dblclick', doubleClickHandler);
}

Comments

[dm]

Спасибо. console.log('click'); это для теста?

[Алексей Уколов]

Да, конечно.

[dm]

Алексей Уколов: Попробовал, все работает. Вопрос в целях обучения - зачем index и button объявлеть до цикла? Можно же Var button объявить внутри цикла, а индекс уже и так объявлен.

var buttonItems = document.querySelectorAll('.button-item');

for (var index = 0; index < buttonItems.length; index++) {
var button = buttonItems[index];

button.addEventListener('click', function (event) {
event.preventDefault();
});
}

[Алексей Уколов]

Потому что это хорошая практика - www.w3schools.com/jS/js_best_practices.asp

[dm]

Алексей Уколов: Спасибо за помощь. Пытаюсь использовать ваш код (не тупо копирую а вникаю что и как), но не получается сделать, не все понимаю.

P. S. Вообще я сделал эти попапы, но код плохой, мягко говоря. Страница вот - dmink.ru/security/video.html

Кнопку "Закрыть" даже повторяю в коде для каждого товара, иначе она не работает. Говнокод, одним словом, а задача вроде не сложная.

[Алексей Уколов]

Что именно-то вам непонятно? Вроде, код достаточно простой.

[dm]

Алексей Уколов: Обновил вопрос

[Алексей Уколов]

dm: вы лучше новый вопрос задайте, а то мы запутаемся. А этот верните в первоначальное состояние, чтобы в будущем было ясно на какой вопрос я отвечал.

[dm]

Алексей Уколов: хорошо, минуту

[alex-1917]

Лучше делать так:

это подходит для примитивных алертов, но как только возникнет вопрос в передаче параметров, например, при отправке форм, то встает вопрос - нужно ли экономить память на паре-тройке форм?
Или есть изящное решение и для форм?

Answer 2

[Антон M]

Решение в ES6:

const buttonItems = document.querySelectorAll('.button-item');

for (let buttonItem of buttonItems) {
  buttonItem.addEventListener('click', (e) => e.preventDefault());
}

Источник: developer.mozilla

Или ещё лаконичнее:

const buttonItems = document.querySelectorAll('.button-item');

buttonItems.forEach((buttonItem) => buttonItem.addEventListener('click', (e) => e.preventDefault());

Источник: developer.mozilla