[노마드 바닐라JS 챌린지] Day.4

EVENT

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

function handleTitleClick(){
    h1.style.color = "blue";
}
function handleMouseEnter(){
    h1.innerText = "mouse is here!";
}
function handleMouseLeave(){
    h1.innerText = "mouse is gone!";
}
function handleWindowResize(){
    document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy(){
    alert("copier!");
}
function handleWindowCopy(){
    alert("SOS no WIFI");
}
function handleWindowCopy(){
    alert("All GOOD!");
}

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

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

 

handelTitleClick 이라고 쓴 이유는 click이 되어야 이 함수가 실행이 되기 때문임.

이벤트와 상관없이 실행 시키려고 할 때는 handelTitleClick ()가 되겠지

 

Day.4 과제 제출

superEventHandler 객체에 이벤트를 모두 작성함.

// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
// <⚠️ /DONT DELETE THIS ⚠️>

const title = document.querySelector("body h2");

const superEventHandler = {
  mouseEnter: () => {
    title.innerText = "Mouse is here!";
    title.style.color = colors[0];
  },
  mouseLeave: () => {
    title.innerText = "Mouse is gone!";
    title.style.color = colors[1];
  },
  mouseResize: () => {
    title.innerText = "You just resized!";
    title.style.color = colors[2];
  },
  mouseClick: () => {
    title.innerText = "That was a right click!";
    title.style.color = colors[3];
  }
};

title.addEventListener("mouseenter", superEventHandler.mouseEnter);
title.addEventListener("mouseleave", superEventHandler.mouseLeave);
window.addEventListener("contextmenu", superEventHandler.mouseClick);
window.addEventListener("resize", superEventHandler.mouseResize);