JS) addEventListener()

https://developer.mozilla.org/ko/docs/Web/Events

addEventListener의 mouse event를 사용해보았다.
사용해 본 이벤트 중 일부 코드를 저장용으로 올린다. :D

일단 아래의 코드는 일반적으로 내가 썼고, 처음에 만들었던 코드.

const colors = ["#", "#", "#", "#", "#"];
const mouseEvent = document.querySelector("h2");

// mouseenter, mouseleave, contextmenu, resize
function enter() {
  //   console.log(mouseEvent);
  //   console.log(colors[0]);
  mouseEvent.textContent = "Mouse here!";
  mouseEvent.style.color = colors[0];
}

function leave() {
  mouseEvent.textContent = "Mouse gone!";
  mouseEvent.style.color = colors[1];
}

function rightClick() {
  mouseEvent.textContent = "Right click!";
  mouseEvent.style.color = colors[4];
}

function resize() {
  const width = window.innerWidth;
  //   console.log(width);

  if (width > 1000) {
    mouseEvent.style.color = colors[3];
    mouseEvent.textContent = "Resized!";
  }
}

mouseEvent.addEventListener("mouseenter", enter);
mouseEvent.addEventListener("mouseleave", leave);
window.addEventListener("contextmenu", rightClick);
window.addEventListener("resize", resize);

그리고 아래의 코드는 객체(object) 안에 전부 핸들링한 버전.
처음에 위의 코드 대로 작성했다가 const 안에 어떻게 넣지..? 싶었다. 😅
구조는 👉여기에서 확인할 수 있다!

const EventHandler = {
  enter() {
    mouseEvent.textContent = "Mouse here!";
    mouseEvent.style.color = colors[0];
  },

  leave() {
    mouseEvent.textContent = "Mouse gone!";
    mouseEvent.style.color = colors[1];
  },

  rightClick() {
    mouseEvent.textContent = "Right click!";
    mouseEvent.style.color = colors[2];
  },

  resize() {
    const width = window.innerWidth; //x
    //   console.log(width);

    if (width > 1000) {
      mouseEvent.style.color = colors[3];
      mouseEvent.textContent = "Resized!";
    } else {
      mouseEvent.style.color = colors[4];
      mouseEvent.textContent = "Resized!";
    }
  },
};

mouseEvent.addEventListener("mouseenter", EventHandler.enter);
mouseEvent.addEventListener("mouseleave", EventHandler.leave);
window.addEventListener("contextmenu", EventHandler.rightClick);
window.addEventListener("resize", EventHandler.resize);

EventHandler 안에 함수는 잘 작성한거같은데, 왜 자꾸 안 될까.
이유는 맨 아래 코드들이었다.

EventHandler안에서 실행되는 함수이니,
맨 위의 코드처럼 그냥 ("mouseenter", enter);라고 하면 못 알아듣는다.
그래서 EventHandler.enter라고 입력해주어야 한다.

막상 바꿔놓고 다시 코드를 살펴보면
실행될 함수의 겉모습과 EventListener를 추가할때 상세 위치만 바뀌었다.
혹시나 addEventListener()를 사용할때 저렇게 객체 안에 넣게되면 이번 글을 참고하면 될듯하다. ^_~