마우스 클릭 이벤트

챌린지 일지. Day3. 2021 03 10
vsc에서 실습

const title = document.querySelector('h1');

const superEventHandler = {
    mouseHover: () => {
        title.innerText = "hover now"
        title.style.color = "red"
    },
    mouseeLeave: () => {
        title.innerText = "bye bye~"
        title.style.color = "blue"
    },
    windowResize: () => {
        title.innerText = "Im resizing~"
        title.style.color = "yellow"
    },
    rightClick: () => {
        title.innerText = "우클릭"
        title.style.color = "green"
    }
  };

title.addEventListener("mouseover" , superEventHandler.mouseHover);
title.addEventListener("mouseleave" , superEventHandler.mouseeLeave);
window.addEventListener("resize" , superEventHandler.windowResize);
window.addEventListener("contextmenu" , superEventHandler.rightClick);

• js에서 html 태그를 선택하고 정의한다.
• 이벤트 핸들러의 함수를 정의한다.
• 리스너로 실행한다.