Event default and delegation

Event default behaviour

const buttonOne = document.querySelector('.btn-one');
const buttonTwo = document.querySelector('.btn-two');
const orf = document.querySelector('.orf');
const input = document.querySelector('input');

buttonOne.addEventListener('click', function (event) {
  this.style.backgroundColor = 'seagreen';
  this.style.color = 'white';
  console.log(this);
});

buttonTwo.addEventListener('click', e => {
  e.currentTarget.style.backgroundColor = 'mediumaquamarine';
  console.log(e.currentTarget);
  console.log(e);
});

orf.addEventListener('click', e => {
  e.preventDefault();
  e.currentTarget.style.padding = '0.5rem';
  e.currentTarget.style.backgroundColor = 'goldenrod';
  console.log(e.defaultPrevented);
});

input.addEventListener('click', e => {
  e.preventDefault();
  console.log(e.defaultPrevented);
});

Event delegation

const list = document.querySelector('ul');
console.log(list);
const buttons = Array.from(document.querySelectorAll('button'));
const button = document.querySelector('button');

list.addEventListener('click', e => {
  if (e.target.matches('a')) {
    const text = e.target.innerHTML;
    console.log(e.target, text);
    console.log(e.currentTarget);
  };
  if (e.target.closest('a')) {
    console.log('You clicked the link!');
  };
});

buttons.forEach(button => {
  button.addEventListener('click', e => {
    // const button = e.target.closest('button');
    if (e.target.closest('button')) {
      console.log('You clicked a button!');
    };
  });
});

button.addEventListener('click', e => {
  const btn = e.target.closest('button');
  const span = btn.querySelector('span');
  const txt = span.innerHTML;
  if (btn) {
    console.log('You clicked the \'' + txt + '\' button!');
  };
});