Как навесить обработчик на коллекцию элементов?
Проблема в том, что вы пытаетесь навесить обработчик на коллекцию элементов, которая возвращается функцией 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);
}
Решение в 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