toggle(on/off)

클릭을 했을 경우 on / off 상태를 번갈아가며 액션을 취해주는 이벤트/

 

버튼을 클릭할 때마다 색상을 변경하고 싶을 경우

const h1 = document.querySelector("div.hello:first-child h1")

function handleTitleClick() {
    h1.classList.toggle("active");
}

h1.addEventListener("click", handleTitleClick);

//////////////////////////////////////////////////////
toggle의 내부 동작은 아래와 동일하다.

    const clickedClass = "active"
    if(h1.classList.contains(clickedClass)) {
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
    
 classList.contains로 현재 요소의 클래스가 있는지 확인하고,
 기존의 다른 클래스는 건드리지 않고 원하는 클래스를 remove하거나 add한다.

※참고

addEventListener을 사용할땐, 함수를 바로 실행하지 마라.

즉, h1.addEventListener("click", handleTitleClick() );  이와 같이 작성하면

클릭이벤트를 발생하기전에 handleTitleClick() 함수가 실행된다.

h1.addEventListener("click", handleTitleClick); 으로 클릭시 함수가 실행되도록 할것.