다양한 반복문을 이용하여 event 연결하기

// list에서 li를 찾는다
const btns = document.querySelectorAll(".list li");

/*
 다양한 반복문을 이용하여 event 연결하기
*/

// 1. 기본 for문
for(let i=0; i<btns.length; i++) {
    btns[i].addEventListener("click", e=> {
    e.preventDefault();
    console.log(i);
    })
}



// 2. for of문
for(let btn of btns) {
    btn.addEventListener("click", e=>{
        console.log(e.currentTarget);
    })
}


/* 3. 배열의 내장함수 forEach 
   : 화살표함수가 인수로 들어가죠
   : 이렇게 인수로 들어가는 함수를 콜백함수라 한다.
   : 파라미터로 전달되는 값이 3가지가 있음. 
    1) 반복대상 2) 순서값 3) 원본배열(이거는 잘 쓰지 않는다.)
*/
       
btns.forEach((btn, index) => {
    btn.addEventListener("click", e=>{
        console.log(index);
    })
})