[JavaScript] ⑦ 자바스크립트 DOM 이벤트 핸들링

이벤트(event)란 애플리케이션에서 발생하는 사용자의 마우스 클릭 click, 키보드 입력 keydown 등과 같은 활동이며, 이벤트 드리븐 프로그래밍(Event-driven Programming)은 이러한 이벤트를 중심으로 프로그램을 제어하는 방식을 일컫는다.

이벤트 핸들러란?

특정한 이벤트가 발생했을 때, 호출되는 코드(대부분의 경우 함수)를 이벤트 핸들러(Event Handler)라 한다. 아래의 코드는 클릭 시 배경 색상을 임의로 바꾸는 이벤트 핸들러를 구현한 것이다. 이벤트 핸들러 추가는 어트리뷰트 방식, 프로퍼티 방식, addEventListener메서드 방식으로 할당할 수 있는데, 오늘날에는 addEventListener 방식을 가장 많이 사용한다

 

아래 버튼 클릭 시 이벤트 리스너의 click 이벤트가 감지되어 bgChange 핸들러가 실행된다. 결과적으로 화면의 배경이 자동으로 변경된다.

 

 

const btn = document.querySelector('button');

function random(number) {
    return Math.floor(Math.random()*number);
}

function bgChange() {
    const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
    document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', bgChange);

또는 아래와 같이 다양한 이벤트 리스너를 추가하고 핸들러를 통해 이벤트를 감지할 수 있다. 아래 텍스트에서는 마우스 오버, 아웃, 오른쪽 클릭, 화면 크기 조정의 이벤트를 리스닝하고 있다.

 

Hello... I am ready to listen...

const colors = ["red", "blue", "green", "pink", "orange"];

const eventH1 = document.querySelector(".eventHandle h1");

function getRandomColor() {
  const randomIndex = Math.floor(Math.random() * colors.length);
  eventH1.style.color = colors[randomIndex]
}

const superEvenetHandler = {
  "handleMouseOver": function handleMouseOver() {
    eventH1.innerText = "Mouse is here!";
    getRandomColor();
  },
  "handleMouseOut": function handleMouseOut() {
    eventH1.innerText = "Mouse has gone T_T";
    getRandomColor();
  },

  "handleWindowResize":
    function handleWindowResize() {
      eventH1.innerText = "The screen is resized!"
      getRandomColor();
    },

  "handleMouseDown": function handleWindowMouseDown() {
    eventH1.innerText = "Right button clicked!"
    getRandomColor();
  }
}

eventH1.addEventListener("mouseover", superEvenetHandler.handleMouseOver);
eventH1.addEventListener("mouseout", superEvenetHandler.handleMouseOut);
window.addEventListener("resize", superEvenetHandler.handleWindowResize);
window.addEventListener("contextmenu", superEvenetHandler.handleMouseDown);

• 참고: Introduction to events, MDN