[JS] 2. Event Handling

John_Dev·2021년 10월 30일
0

JS Study

목록 보기
2/2
post-thumbnail

Document Object

  • JS는 HTML을 통해서 열 수 있지만, HTML을 불러와서 코딩을 통해 interaction을 만들 수 있다는 점에서 강력함
  • JS에서 HTML을 불러올 때, document를 이용함
  • 크게 아래와 같은 방법들로 HTML에 있는 object를 불러올 수 있음
1. document.getElementById();
2. document.getElementsByClassName();
3. document.querySelector();
  • object를 불러온 다음에는 다양한 것들을 할 수 있지만, 웹사이트 안에서 발생하는 다양한 Event를 핸들링 할 수 있다는 것이 JS의 큰 장점

Event Listener

  • 웹사이트 안에서 발생하는 Event는, click, mouse enter, mouse leave, copy, paste, window resize 등 다양함
  • 이런 Event들을 핸들링 하기 위해선, 먼저 아래와 같은 형태로 Event Listener를 Add 해줘야 함
const a = document.getElementById();
a.addEventListener("event", "function")
  • 이때, event는 앞서 말한 다양한 이벤트 중 원하는 것을 기입하고, function에는 그 이벤트가 발생했을 때 어떤 반응을 할 것인지 함수를 만들어 작성해 주면 됨
  • 예를 들어 click event가 발생했을 때, 글자 색깔이 바뀌는 함수를 적용한다면 아래와 같이 코드를 짤 수 있음
const a = document.getElementById();
function changeColor(){
   a.style.color = "blue";
}
a.addEventListener("click", changeColor);

CSS와 Class를 활용한 변경

  • 앞서 예시로 들었던 함수를 통해 글자 색깔이 바뀌는 것 등 스타일을 입히는 것은 JS에서 하는 것 보다 CSS에서 처리하는 편이 코드가 더 깔끔해짐
  • CSS에서 스타일에 관한 코드를 썼다면, JS에서 해야 하는 일은 그 class를 잘 불러오는 것임
  • JS에서 class를 변경하기 위해서는, className을 업데이트 할 수 있고, classList를 업데이트 할 수 있음
  • className을 업데이트 하는 예시는 아래와 같음
#style.css
.active {
   color : blue;
}

#app.js
const a = document.getElementById();
function changeClassName(){
   a.className = "active";
}
a.addEventListener("click", changeClassName);
  • className을 업데이트 하는 경우에는, 기존에 있던 className을 무시하고 아예 업데이트를 하게 돼서 잘 사용하지 않음
  • classList를 업데이트 하는 예시는 아래와 같음
#style.css
.active {
   color : blue;
}

#app.js
const a = document.getElementById();
function changeClassName(){
   a.classList.add("active");
}
a.addEventListener("click", changeClassName);
  • 이처럼 classList는 add, remove, contains 등의 다양한 함수를 적용시켜 사용할 수 있기 때문에 이걸 주로 많이 활용함

업데이트와 Toggle

  • 아까와 같은 예시에서, 처음 click 했을 때 상태가 변하고, 다시 click 했을 때는 처음과 같은 상태로 돌아오게끔 하고 싶음
  • 그럴 경우엔, 다음과 같이 코드를 짤 수 있음
const a = document.getElementById();

function changeColor(){
    const changedState = "active";
    if(a.classList.contains(changedState)){
        a.classList.remove(changedState);
    } else{
        a.classList.add(changedState);
    }
}
a.addEventListener("click", changeColor)
  • 근데 이러한 코드는 굉장히 많이 사용되는 로직이라, 이미 자체적으로 구현된 함수가 존재함
  • 아래와 같은 코드로 위와 똑같은 기능을 할 수 있음
const a = document.getElementById();

function changeColor(){
    a.classList.toggle('active')
}
a.addEventListener("click", changeColor)

결론 : 토글은 신이다..

0개의 댓글