[FC] 반복적인 요소 이벤트 연결하기 Day-11

<ul class="list">
	<li class="on"><a href="#">MENU1</a></li> // css를 통해 class="on" 색상을 넣어둔 상태
    <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>

JavaScript를 이용해 반복적인 요소 이벤트에 연결할 수 있습니다.

1번 방법 (for 문)

const btns = document.querySelectorAll(".list li");

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) 잘못된 방법

btns.forEach((btn, index) => {
	btn.addEventListener("click", (e) => {
    	console.log(index);
        btns[index].classList.add("on");
        // btns[index] 클릭 시 class="on"을 추가한다는 명령어다. 원하는 방법은 아니다.
    });
});

4번 방법 (forEach) 정답-!

btns.forEach((btn, index) => {
	btn.addEventListener("click", (e) => {
		for(let item of btns){
        	item.classList.remove('on');
        } // for let item을 통해 모든 class="on"을 제거한다.
        btns[index].classList.add('on');
        // 이후 클릭한 btns[index]에만 class="on"을 추가한다.
	});
});

새로운 방법

이벤트 발생 로직은 처음에는 혼란스럽지만, 자주 활용하게 될 로직입니다.

굳이 isOn을 사용한 이유는 더 효율적으로 작동하기 때문입니다. 이미 class="on"인 상태의 .list li를 눌렀을 때 참일 경우 return 시켜 다음 코드를 작동시키지 않습니다.

btns.forEach((btn, index) => {
	btn.addEventListener("click", (e) => {
    	let isOn = e.currentTarget.classList.contains('on');
        if(isOn){
        	return;
        }
		for(let item of btns) {
        	item.classList.remove('on');
            btns[index].classList.add('on');
        }
	});
});