Module 5: Event Listener

const butts = document.querySelector('.butts');
const coolButton = document.querySelector('.cool');

const hooray = () => console.log('Hooray!');
//This is an arrow function that can also be used as an eventhabdler.

function handleClick() {
   console.log('🐛It got clicked!');
}

butts.addEventListener('click', handleClick);
coolButton.addEventListener('click', handleClick);

//if you want to remove it then you have to do this:
//There's no way to remove an anonymous function. You must use a named function in order to unbind it.

butts.removeEventListener('click', handleClick);

//
//Listen on multiple items.

const buyButtons = document.querySelectorAll('button.buy');

//You have to forEach() each element. A method Run a function for each item in our node list.
buyButtons.forEach(functions(buyButton) {
  console.log(buyButton);
  console.log('Binding the buy button');
buyButton.addEventListener('click', buyItem);
})

//or

function handleBuyButtonClick(anythingWeWant) {
anythingWeWant.addEventListener('click', buyItem);
}

buyButtons.forEach(handleBuyButtonClick);


//arrow function form//you cannot unbind it since it is an anonymous function.
buyButtons.forEach((button) => {
button.addEventListener('click', () => {
   console.log('you clicked it');
});
});