자바스크립트 기초 [event 2]

📍 className

이전에 class는 상관없이 모든걸 교체해 버린다.

✔️ 문제점 1

해당 코드 처럼 event를 작성할 수 있다.
이렇게 작성할 경우 active class에 오타가 있을 때 오류가 발생할 수 있다.

const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
    if(h1.className === "active"){
        h1.className = "";
    }else{
        h1.className = "active";
    }
}
h1.addEventListener("click", handleTitleClick);

---

✔️ 문제점 2

clickedClass를 선언해 오류를 조금 줄 일 수 있으나 기존 클래스가 이미 존재할 경우 해당 class는 없어지고 active class로 덮어지는 문제점이 있다.

const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
    const clickedClass = "active";
    if(h1.className === clickedClass){
        h1.className = "";
    }else{
        h1.className = clickedClass;
    }
}
h1.addEventListener("click", handleTitleClick);

---

✔️ 문제점 3

active 옆에 기존에 있던 클래스는 작성해 주는 방법도 있으나 기존 class가 다중일 경우 지저분할 수 있는 문제가 있다.

const h1 = document.querySelector(".hello h1"); 
function handleTitleClick(){
    const clickedClass = "active 기존에 있던 클래스 작성";
    if(h1.className === clickedClass){
        h1.className = "";
    }else{
        h1.className = clickedClass;
    }
}
h1.addEventListener("click", handleTitleClick);

📌 해결 방법

📍 classList

우리가 명시한 class가 HTML element의 class포함되어 있는지 말해준다.

const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
    const clickedClass = "active";
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    }else{
        h1.classList.add(clickedClass);
    }
}
h1.addEventListener("click", handleTitleClick);

classList.remove classList.add
기존 class는 살리고 active class를 삭제, 추가 할 수 있다.

해당 방법도 있지만 좀 더 간략한 방법으로 해결할 수 있다.

📌 더 좋은 해결 방법

✔️ toggle function

• class name이 존재하는지 확인 후 만약 class name이 존재 한다면 toggle은 class name을 제거한다.

(토큰을 toggle한다. 토큰이 존재하면 토큰을 제거하고 존재하지 않는다면 토큰을 추가한다.)

const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
    h1.classList.toggle("active");
}
h1.addEventListener("click", handleTitleClick);

그 많던 코드를 한 줄로 깔끔하게 정리할 수 있다.