JavaScript로 크롬 앱 만들기 #9

Heeseung Ha·2021년 11월 25일

노마드 코더 - 바닐라 JS로 크롬 앱 만들기 #9

element의 내부를 보고 싶으면 console.dir()로 확인이 가능하다.
console.dir()을 찍었을 때 on~으로 시작하는 것들을 이벤트(event)라고 한다.

✔ `Event`

JS에서 대부분 작업하는 것은 event 처리에 관한 것이다.
이벤트(event): 어떤 행위를 하는 것. ex) click, hover, input...
모든 이벤트는 JS의 eventListener를 통해 listen 하는 것이 가능하다. eventListener는 어떤 event를 listen 하고 싶은지 알려준다. 그러니까 여기서 쓰는 listen은 처리라고 생각하면 된다.
ex) title.addEventListener("click") : 사용자가 title을 "click"하는 이벤트를 처리한다.

✔ `Click Event`

Click event 발생 → HTML 요소를 가져와서 addEventListener function을 실행한다.
이때 어떤 이벤트를 처리할지 명시해야 한다.
페이지에서 element를 찾아오고, 그 element에 eventListener를 추가하여 유저가 이벤트를 발생시킬 때 그 이벤트들에 대한 반응을 하는 것이 listener의 역할이다.

// title의 색깔을 파란색으로 바꾸는 함수
function handleTitleClick() {
  title.style.color = "blue";
}

// title을 "click"하는 이벤트를 통해 handleTitleClick이라는 함수가 실행.
title.addEventListener("click", handleTitleClick);

사용자가 title을 click하면 JS가 handlerTitleClick 함수를 통해 이벤트에 대한 반응을 실행시키도록 하기 위해 함수명 명시 후 ()를 넣지 않는다. → Callback 함수

Callback 함수: 나중에 호출되는 함수. 즉, 이벤트 발생 또는 특정 시점 도달 시 시스템에서 호출하는 함수를 뜻한다.
여기서는 handleTitleClick이 Callback 함수라고 할 수 있다.

✔ 응용하기 #1

const title = document.querySelector(".hello h1");

function handleTitleClick() {
  title.style.color = "blue";
}

function handleMouseEnter() {
  title.innerText = "Mouse is here!";
}

function handleMouseLeave() {
  title.innerText = "Mouse is gone!";
}

title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

① 디폴트 화면

② mouseenter 이벤트 발생

③ mouseleave 이벤트 발생

`title.onclick = handleMouseEnter` == `title.addEventListener("mouseenter", handleMouseEnter)`

→ addEventListener를 더 선호한다. 이유는 removeEventListener를 통해 원할 때 eventListener를 제거할 수 있기 때문

✔ 응용하기 #2

function handleWindowResize() {
  document.body.style.backgroundColor = "tomato";
}

function handleWindowCopy() {
  alert("copier!");
}

function handleWindowOffline() {
  alert("SOS no WIFI");
}

function handleWindowOnline() {
  alert("All good!");
}

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);