이벤트에 반응하는 웹사이트 만들기

* addEventListener 함수

addEventListener 함수는 웹사이트에서 행해진 이벤트를 듣고 해당 이벤트가 실행되면 사용자가 선언한 함수를 호출하는 역할을 한다.
addEventListener 함수는 2개의 인자를 받는데, 첫번째 인자는 이벤트명이고, 두번째 인자는 해당 이벤트가 실행되면 호출될 함수이다.

다음은, 4가지 이벤트가 실행될 때 발생시킬 함수와, 4가지 이벤트를 듣는 addEventListener 함수의 예시이다.

1. mouseenter: 해당 요소에 마우스 커서가 올라간 경우

   function onMouseEnterHandler() {
        h2.innerText = "The mouse is here!";
        h2.style.color = "#1abc9c";
    }
    h2.addEventListener("mouseenter", onMouseEnterHandler);

2. mouseleave: 해당 요소 밖으로 마우스 커서가 나갔을 경우

   function onMouseLeaveHandler() {
         h2.innerText = "The mouse is gone!";
         h2.style.color = "#3498db";
     }
     h2.addEventListener("mouseleave", onMouseLeaveHandler);

3. resize: 웹 브라우저의 길이가 바뀐 경우

   function onResizeHandler() {
         h2.innerText = "You just resized!"
         h2.style.color = "#9b59b6";
     }
     addEventListener("resize", onResizeHandler);

4. contextmenu: 해당 요소에 마우스 우클릭을 한 경우

   function onContextMenuHandler() {
         h2.innerText = "That was a right click!"
         h2.style.color = "#f39c12";
     }
     h2.addEventListener("contextmenu", onContextMenuHandler);