JS-DOM 이벤트 반복문

DOM이벤트를 반복문을 통해 사용하기

ex 1.)

<ul class="list">
  <li></a href="#">MENU1</a></li>
  <li></a href="#">MENU2</a></li>
  <li></a href="#">MENU3</a></li>
  <li></a href="#">MENU4</a></li>
  <li></a href="#">MENU5</a></li>
</ul>

해당 메뉴1,2,3,4,5를 클릭하면 'on'이 붙도록(반복적인 요소에 이벤트 연결)

//list li가 하나(단수)일때는 .querySelector 이지만,
//list li가 여러개(복수)라서 .querySelectorAll로 사용
const btns = document.querySelectorAll(".list li");

for(let i=0; i<btns.length; i++){
	btns[i].addEventListener("click", e => {
    	e.preventDefault();
      //클릭했을떄 링크의 기본 동작을 막아주기 위 해 preventDefault 사용
	    console.log(i);
      //menu1 누르면 0이 출력, menu2 -> 1 ... 출력됨
    })
}

ex 2.)

for(let btn of btns){
	btn.addEventlistener("click", e => {
    	console.log(e.currentTarget);
      //클릭한 바로 그대상(자기자신) 호출
    })
}
//콘솔로그에 menu1 누르면 menu1, menu2누르면 menu2 (자기자신이 출력됨)

ex 3.)

//forEach(반복되는대상,순서값)
btns.forEach((btn, index) => {
	btn.addEventListener("click", e => {
    	console.log(index);
    })
})
//출력시 메뉴1 누르면 0 출력, 메뉴2누르면 숫자 1출력 .....