JavaScript - Event 응용

이벤트리스너와 if문을 사용해보자.

const h1 = document.querySelector("div.hello:first-child h1") // hello클래스의 첫 번째 요소의 h1

 

function clickHandler() {
    if (h1.style.color === "red") {
        h1.style.color = "blue";
    } else {
        h1.style.color = "red";
    }
}

h1.addEventListener("click", clickHandler);

h1 부분을 클릭하면 글자가 파란색, 다시 한번 클릭하면 빨간색으로 바뀌게 된다.

의미전달과 보기 좋게 만들기

아래처럼 더 읽을 때 뭘 하려고 하는지 훨씬 보기 좋고 깔끔하게 만들 수 있다.

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

function clickHandler() {
    const currentColor = h1.style.color; // h1태그의 기본 컬러 설정.
    let newColor;

    if (currentColor === "red") {
        newColor = "blue";
    } else {
        newColor = "red";
    }

    h1.style.color = newColor; // 이 코드가 없다면 작동되지 않는다.
}

h1.addEventListener("click", clickHandler);

css를 통해 바꾸기

자바스크립트로 직접 style을 바꾸는 게 아니라, css를 통해 접근해서 바꿔줄 수도 있다.

일단 css에 변경을 원하는 색깔을 지정해준다.

.active {
    color: blue;
}

그리고 자바스크립트로 h1에 active 클래스를 전달해준다.

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

function clickHandler() {
    const clicked = "active"; // 많이 사용하고 오타가 생길 수 있는 string은 const 변수에 담아서 사용하면 좋다.

    if (h1.className === clicked) {
        h1.className = ""; // h1.className은 getter이면서 setter이다. (class를 얻어올 수도 있지만, 변경할 수도 있다.)
    } else {
        h1.className = clicked;
    }
}

h1.addEventListener("click", clickHandler);

하지만 만약 h1이 클래스를 가지고 시작된다면, 여러 개라면 문제가 생긴다. (폰트 등)

classList를 이용해서 원하는 클래스만 바꾸기

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

function clickHandler() {
    const clicked = "active"; // 많이 사용하고 오타가 생길 수 있는 string은 const 변수에 담아서 사용하면 좋다.
    if (h1.classList.contains(clicked)) { // h1의 클래스 목록에 clicked("active")가 있다면.
        h1.classList.remove(clicked); // h1의 클래스 목록의 clicked를 삭제한다.
    } else {
        h1.classList.add(clicked); // h1의 클래스 목록에 clicked를 추가한다.
    }
}

h1.addEventListener("click", clickHandler);

더 간단하게!

위의 코드를 더 간단하게 만들어 줄 수 있다.

바로 toggle을 사용해서.

toggle은 지정해준 class가 존재하면 삭제해주고, 존재하지 않는다면 추가해준다.

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

function clickHandler() {
    h1.classList.toggle("active"); // h1태그의 클래스리스트에 active 클래스가 없다면 추가해주고, 있다면 삭제한다.
}

h1.addEventListener("click", clickHandler);

직접 해보기.

다크모드 버튼을 만들어 봤다.

// html 버튼

<a id="date">mode</a>

// js

date.addEventListener('click', function(){ // date라는 id값을 가진 a태그(mode)를 클릭하면 해당 함수가 실행된다.
    let a = document.querySelector('body'); // a라는 변수에 body를 담는다.
    let link = document.querySelectorAll('.index'); // link라는 변수에 모든 index클래스를 담는다.
        if(this.id === 'date'){ //  this는 date를 말한다.
            a.style.backgroundColor = 'black';
            a.style.color = 'white';
            this.id = 'dateX'; // a 태그의 id값을 dateX로 바꾼다.
        } else {
            a.style.backgroundColor = '';
            a.style.color = 'black';
            document.querySelector('nav').style.color = 'white';
            this.id = 'date';
        }
})

한 번 누르면 다크모드, 다시 누르면 원래 모드로 바뀐다.

더 간단하고 보기 좋게 만들 수 있겠지만, 1차원적으로 만들어봤다. 다듬는 건 나중에 복습할 때 해보려고 한다.