[Vanilla JS] Events

<div class="hello">
    <h1>Click me!</h1>
  </div>

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!";
}

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

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

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

function handleWindowOnline() {
  alert("ALL GOOD!");
}

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

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);

// WIFI 연결 유무 알림창 offline - online
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

 앞서 선언해둔 함수들을 직접 실행하는 것이 아니라 조건에 맞는 이벤트가 발생했을 때 Javascript가 자동으로 실행할 수 있도록 하는 addEventListener 의 기능을 이해하기 위한 코드입니다.