[JavaScript] JS Event 처리(onClick)

div.fruit h1[id=first]  : class=fruit인 div중 h1의 id가 first인 쿼리

const h1=document.querySelector("div.fruit h1[id=first]");

 

handleTitleClick1, 2는 아래와 같은 역할을 동일하게 수행하는 코드이다.

    h1의 classList에 clicked class가 이미 있는지 확인

        → 만약 있다면 clicked를 제거

        → 없다면 clicked를 추가

 

    toggle 함수는 handleTitleClick2 함수 내부의 코드 4줄과 동일한 역할을 한다.

function handleTitleClick1(){
    const clickedClass = "active";
    if(h1.classList.contains(clickedClass)) 
        h1.classList.remove(clickedClass);
    else h1.classList.add(clickedClass);  
}

function handleTitleClick2(){
    h1.classList.toggle("clicked");
}

 

함수를 바로 실행시키고 싶다면 아래와 같이 바로 호출하여 사용하면된다.

handleTitleClick();

그러나 user가 title을 click 할 경우에만 js가 실행버튼을 대신 눌러주길 원하므로 addEventListener()를 사용한다.

 

아래 코드 두 줄 모두 같은 역할을 수행한다.

h1.addEventListener("click", handleTitleClick);

h1.onclick = handleTitleClick;