JavaScript로 클릭한 메뉴 항목에만 클래스 추가하기

안녕하세요

찐망고 입니다.

 

오늘은 navi요소에서 많이 쓰는 

해당 요소를 클릭했을 때만 클래스를 추가하고

나머지 요소들은 클래스를 제거하는 코드를 볼 건데요..

탭이랑 비슷하죠?

 

1. 기본코드

const navMenus = document.querySelectorAll(".navi > ul > li");

navMenus.forEach(navMenu => { 
    navMenu.addEventListener("click", () => {
        navMenu.classList.toggle("on");
    })
})

 

 

일단 위 코드는 클릭한 li요소들에게 on클래스가 추가됩니다.

다시 클릭을 해야 제거되겠죠?

 

2. 개선된 코드

const navMenus = document.querySelectorAll(".navi > ul > li");

navMenus.forEach(navMenu => { 
    navMenu.addEventListener("click", () => {
        // 모든 li 요소에서 on 클래스를 제거
        navMenus.forEach(menu => {
            menu.classList.remove("on");
        });
        // 클릭된 요소에만 on 클래스 추가
        navMenu.classList.add("on");
    });
});

 

전체 li요소의 on클래스를 제거하고 클릭된 요소에만 on클래스를 추가하면 되겠죠? 

 

 

 

3. 이벤트 위임을 사용한 코드 개선

const navMenuContainer = document.querySelector(".navi-menu > ul");

navMenuContainer.addEventListener("click", (event) => {
    const target = event.target.closest("li");
    if (target && navMenuContainer.contains(target)) {
        // 모든 li 요소에서 on 클래스를 제거
        const navMenus = navMenuContainer.querySelectorAll("li");
        navMenus.forEach(menu => {
            menu.classList.remove("on");
        });
        // 클릭된 요소에만 on 클래스 추가
        target.classList.add("on");
    }
});

 

이벤트 위임을 사용하여 코드를 개선할 수도 있는데요.

 

위 코드를 비교해 보면

 

성능:

• 개별 이벤트 리스너: 각 li 요소마다 이벤트 리스너를 추가하고, 클릭할 때마다 모든 li 요소를 순회하여 on 클래스를 제거합니다.
• 이벤트 위임: 단 하나의 이벤트 리스너가 추가되며, 클릭된 요소만 처리합니다. 많은 수의 li 요소가 있을 때 성능이 더 우수합니다.

코드 간결성:

• 개별 이벤트 리스너: 코드가 간결하고 이해하기 쉽습니다.
• 이벤트 위임: 코드가 조금 더 복잡해질 수 있으나, 큰 프로젝트에서 유지보수가 용이합니다.

유지보수성 및 확장성:

• 개별 이벤트 리스너: 동적으로 추가되는 요소에 대해서는 별도로 이벤트 리스너를 추가해야 합니다.
• 이벤트 위임: 동적으로 추가되는 요소들도 자동으로 처리됩니다.

 

이벤트 위임 방법이

많은 li 요소를 다루거나, 동적으로 요소가 추가될 가능성이 있는 경우 더 효율적이고 유지보수에 유리합니다.

초보자 입장에선 코드를 이해하는 것이 주목적이니까 개별 이벤트 리스너 방식을 사용해도 괜찮습니다.