[자바스크립트] 이벤트리스너를 이용한 마우스오버 함수

 

 

 

// 1. html에 있는 원하고자 하는 부분과 연결한다.
const title = document.querySelector("#title");

// 2. 모든 핸들러 함수를 담고 있는 변수를 만들고 거거 안에다 다 만든다.
const superEventHandler = {

  // 3. 여러개의 함수를 만들때에는 꼭 , 를 붙여줄것
  mouseOver: function () {
    title.innerHTML = "The mouse is here!!";
    title.style.color = "red";
  },
  contextmenu: function () {
    title.innerHTML = "오른쪽 마우스를 클릭하셨어요!";
    title.style.color = "blue";
  }
};


// 4. 이벤트리스너를 사용하여 원하는 부분에 적용시킨다.
// 기능에 따라 emelement를 객체로 할지 window로 할지 잘 생각해서 할 것
title.addEventListener("mouseover", superEventHandler.mouseOver);
window.addEventListener("contextmenu", superEventHandler.contextmenu);