[vanilla JS] 여러 개의 li요소에 같은 클릭 이벤트 주기

<li> 태그는 리스트 컨텐츠를 나열할 때, 혹은 여러개의 간단한 탭버튼을 만들때 등 다방면으로 사용됩니다.

 

그렇다면 같은 클래스명을 가진 <li>태그를 어떻게 동일한 이벤트로 처리할 수 있을까요?

 

'tab' 이 라는 클래스명을 가진 li태그 5개에 'active'라는 클래스를 toggle 하는 방식을 예시로 들겠습니다.

<ul>
    <li class="tab">tab</li>
    <li class="tab">tab</li>
    <li class="tab">tab</li>
    <li class="tab">tab</li>
    <li class="tab">tab</li>
</ul>

 

let tab = document.querySelectorAll(".tab"); 
//1. tab 이라는 변수에 document.querySelectorAll(".tab")을 할당 
//-위처럼 처리해줄 경우 'tab'이라는 클래스를 가진 모든 요소를 유사배열로 가져옵니다.


for(let i = 0; i < tab.length; i++) {
	tab[i].onclick = function() {
    	this.classList.toggle("active")
    }
}

//2.for문을 통해 각각의 'tab' 버튼에 click 이벤트를 걸어줌
//-querySelectorAll로 만들어진 유사 배열을 for문으로 돌려준다면 요소마다 정상적으로 이벤트가 동작합니다.

주의) querySelectorAll처리는 진짜 배열이 아닌 '유사배열'이기 때문에 크로스 브라우징 이슈로 인해

forEach() 함수는 사용하기 어렵습니다. (구글 크롬에서는 forEach()가 정상적으로 작동합니다.)

 

 

 

 

JQuery에선 이러한 처리를 더 짧고 매우 간단하게 처리 할 수 있습니다.

 

다만, 순수 자바스크립트를 사용한다면 속도적인 성능에서 압도적으로 뛰어나다는걸 감안해야 할 것 같습니다.