11. DOM과 이벤트 처리-2

#3 이벤트의 종류와 처리 방법

이벤트는 웹 개발에서 사용되는 매우 중요한 개념입니다. 이벤트는 HTML 요소나 JavaScript 객체에서 발생하는 일종의 알림이며, 이벤트에 대한 처리를 담당하는 함수를 이벤트 리스너라고 합니다. 이번 포스트에서는 이벤트 종류와 이벤트 리스너 등록에 대해 다루어보겠습니다.

 

이벤트 종류

웹 브라우저에서는 많은 종류의 이벤트가 발생합니다. 이벤트 종류는 대소문자를 구분하지 않으며, on 접두어를 제외한 이름으로 표기합니다. 대표적인 이벤트 종류는 다음과 같습니다.

• click: 요소를 클릭할 때 발생
• mouseover: 요소 위로 마우스를 움직일 때 발생
• keydown: 키를 누를 때 발생
• submit: 폼을 제출할 때 발생
• load: 문서나 이미지가 로드될 때 발생

이외에도 다양한 이벤트가 있으며, 각 이벤트에 대한 자세한 내용은 MDN 등의 문서를 참고하시기 바랍니다.

 

이벤트 리스너 등록

이벤트 리스너는 addEventListener 메서드를 사용하여 등록할 수 있습니다. 이 메서드는 다음과 같은 구조를 가집니다.

target.addEventListener(type, listener[, options]);

• target: 이벤트를 등록할 대상 요소
• type: 등록할 이벤트 종류
• listener: 이벤트 처리를 담당하는 함수
• options (optional): 옵션 객체로, 이벤트에 대한 설정을 지정할 수 있습니다.

예를 들어, button 요소를 클릭했을 때 메시지를 출력하는 이벤트 리스너를 등록하는 코드는 다음과 같습니다.

<button id="myButton">Click me!</button>

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

위 코드에서 querySelector 메서드를 사용하여 id가 myButton인 요소를 찾고, addEventListener 메서드를 사용하여 click 이벤트에 대한 이벤트 리스너를 등록합니다. 이벤트 처리를 담당하는 함수는 익명 함수로 작성하였으며, 이벤트 발생 시 콘솔에 메시지를 출력하도록 작성하였습니다.

 

이벤트 제거

이벤트 제거는 이벤트를 등록했던 방법과 유사한 방법으로 이벤트 핸들러를 제거하는 것이 가능합니다. 이벤트 핸들러를 등록할 때 사용한 메서드와 인수를 사용하여 이벤트 핸들러를 제거합니다.

이벤트 핸들러를 등록하는 방법 중 하나인 addEventListener() 메서드로 등록한 이벤트 핸들러를 제거하기 위해서는 removeEventListener() 메서드를 사용합니다. removeEventListener() 메서드는 제거할 이벤트 핸들러의 유형, 등록된 함수와 이벤트 버블링과 캡처링 등록 여부를 고려하여 사용해야 합니다.

예를 들어, 아래와 같이 click 이벤트를 등록한 후 이벤트를 제거해보겠습니다.

<button id="myButton">Click me</button>

function handleClick() {
  console.log('Button clicked!');
}

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', handleClick);

// 2초 후에 이벤트 핸들러를 제거합니다.
setTimeout(() => {
  myButton.removeEventListener('click', handleClick);
}, 2000);

위 코드에서 addEventListener() 메서드를 사용하여 click 이벤트 핸들러를 등록한 후, setTimeout() 함수를 사용하여 2초 후에 등록된 이벤트 핸들러를 제거하는 코드입니다.

위와 같이 이벤트 핸들러를 제거하면 등록된 이벤트 핸들러는 실행되지 않게 됩니다. 이렇게 이벤트 핸들러를 등록과 제거를 조합하여 필요한 시점에 이벤트를 등록하고, 필요 없어진 시점에 이벤트를 제거함으로써 불필요한 메모리 사용을 줄일 수 있습니다.