JS (web API's, event)

챌린지에서 학습한거!

web API's를 확인하고 이용하는 과정으로

mouseenter, mouseleave, resize, contextmenu 이벤트를 이용하여 text와 color를 바꾸는 연습을 했다.

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

const hh = document.querySelector("h2");

const superEventHandler = {
  handleMouseEnter: function () {
    hh.innerHTML = "The mouse is here!";
    hh.style.color = colors[0];
  },

  handleMouseLeave: function () {
    hh.innerHTML = "The mouse is gone!";
    hh.style.color = colors[1];
  },

  handleResize: function () {
    hh.innerHTML = "You just resized!";
    hh.style.color = colors[2];
  },
  handleClick: function () {
    hh.innerHTML = "That was a right click";
    hh.style.color = colors[3];
  }
};

hh.addEventListener("mouseenter", superEventHandler.handleMouseEnter);
hh.addEventListener("mouseleave", superEventHandler.handleMouseLeave);
window.addEventListener("resize", superEventHandler.handleResize);
window.addEventListener("contextmenu", superEventHandler.handleClick);