오늘의 수업 일정

✍️ #3.0 ~ #3.5
✔️ 코드 챌린지

바닐라JS 코드 챌린지

💙오늘의 과제💙

어려웠던 부분은

• 모든 함수 핸들러는 superEventHandler내부에 작성해야 합니다.

• title의 색상은 colors 배열에 있는 색을 사용해야 합니다.

  라는 부분이었는데, 제시받은 코드에

const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
const superEventHandler = {};

라고만 되어있어, 처음에는 무슨 소리인지 이해가 안되어 열심히 구글링을 해보았다:)

colors로 값을 지정한 부분은 각각의 함수가 작동할때 저 값을 변동시켜 주면 되는것이었고,
리스트형식으로 나열되어있는 색상을 어떻게 가져와야하는지 헷갈려 에러가 여러번 났었다.

h2.style.color = colors[0];

h2.style.color = "#1abc9c" 계속 이렇게 직접 불러오는게 익숙해서 적었다가 위와같이 불러오는 값으로 변경하였다.

그래도 색상부분은 금방 끝났지만, superEventHandler 내부에 어떻게 작성하라는건지 몰랐다.
{} 가로안에 전체 함수를 넣어보고 빼보고, 여러 시도를 해보다가 발견한 구글링..

EventHandler

event는 보통 EventHandler 라는 오브젝트명에 묶어서 정리!
object로 event를 묶어 관리하면, 코드의 효율성과 가시성이 높아진다.

const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];

const h2 = document.querySelector("h2");
const superEventHandler = {
  helloClick: function () {
    h2.style.color = colors[0];
    h2.innerText = "hihihihihihihihi";
  },

  helloLeave: function () {
    h2.style.color = colors[1];
    h2.innerText = "bye~bye~bye~";
  },

  helloResize: function () {
    h2.style.color = colors[2];
    h2.innerText = "resized~!";
  },

  helloContex: function () {
    h2.style.color = colors[3];
    h2.innerText = "hey~!";
  }
};
h2.addEventListener("mouseenter", superEventHandler.helloClick);
h2.addEventListener("mouseleave", superEventHandler.helloLeave);
window.addEventListener("resize", superEventHandler.helloResize);
window.addEventListener("contextmenu", superEventHandler.helloContex);

+추가로)
resize(창크기변경) 와 contextmenu(마우스 오른쪽 클릭)는 h2를 주면 작동이 안되고, 둘다 Window자체에 걸어주면 작동을 잘 한다.

기능에 따라 객체를 element인지,window인지 잘 봐야한다.