[JavaScript] 바닐라 JS로 크롬 앱 만들기_#04

✨ addEventListener

말그대로 event를 listen 한다. →
app.js에게 무슨 event를 listen하고 싶은 지 알려줘야 한다.

대표적인 '클릭' 이벤트를 예시로 든다면,

// h1를 클릭 시, 글자 색을 파란색으로 바꿔보자!

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

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

title.addEventListener("click", handleTitleClick);
// .removeEventListener 사용 시, event listener를 제거 가능

1. handleTitleClick라는 함수를 만들어 주고, addEventListener를 이용한다.
2. click 이벤트를 감지했을 때, handleTitleClick 값을 반환할 수 있게 만들어준다.
3. title 안에 있는 h1을 클릭했을 때, 색을 파란색으로 바꿔준다.

✨ onclick

addEventListener와 같은 기능을 한다.

title.addEventListener("click", handleTitleClick);

-> title.onclick = handleTitleClick;

하지만 노마드 쌤은 onclick을 추천하지 않는다고 하였다.
.removeEventListener와 같은 기능을 사용할 수 없기 때문이다.

쉽게 풀어서 얘기하면, onclick은 함수를 몇 개를 지정했던
.addEventListener 와 다르게 가장 마지막에 지정한 함수만을 가져온다.

✨ window

window 자체에서 제공하는 기능이다.
Copy, Paste, Wifi On-Offline 등 정말 많은 기능이 있다.

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

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

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

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

function handleWindowOffline() {
  alert("SOS No WIFI");
  console.log("NO WIFI");
}

function handleWindowOnline() {
  alert("ALL GOOD");
  console.log("GOOD WIFI");
}

title.addEventListener("click", handleTitleClick);

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

• 윈도우 창 사이즈 조절 시, 배경 토마토색으로 바꾸기
• 윈도우 창 내에서 Cmd+C 시, "copier" 메세지의 경고창 띄우기
• 와이파이 끄면, "SOS No WIFI" 메세지의 경고창 띄우기
• 와이파이 켜면, "ALL GOOD" 메세지의 경고창 띄우기