1. addEventListener('click', callback);

{ li.addEventListener('click', (event) => { event.target.classList.add("selected"); }); }); // ※ querySelectorAll() 은 배열을 반환"> { li.addEventListener('click', (event) => { event.target.classList.add("selected"); }); }); // ※ querySelectorAll() 은 배열을 반환"> { li.addEventListener('click', (event) => { event.target.classList.add("selected"); }); }); // ※ querySelectorAll() 은 배열을 반환">

*// Bad*
const lis = document.querySelectorAll("li");

lis.forEach((li) => {
  li.addEventListener('click', (event) => {
    event.target.classList.add("selected");
  });
});
*// ※ querySelectorAll() 은 배열을 반환*

*// Cool (이벤트 위임)*
const ul = document.querySelector("ul");

ul.addEventListener('click', (event) => {
  if(event.target.tagName == "LI") {
    console.log(event.target);
    event.target.classList.add("selected");
  }
});