DOM(Document Object Model)은 웹 페이지의 구조와 콘텐츠를 표현하는 객체 모델입니다. 사용자와 상호작용을 위해 DOM 요소에 이벤트 핸들러 함수를 추가할 수 있습니다.

이벤트 핸들러 함수란 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다. 예를 들어, 버튼 클릭, 마우스 오버, 키보드 입력 등의 이벤트에 대한 반응을 정의할 수 있습니다.

이벤트 핸들러 함수 등록

// HTML 요소 선택
const button = document.getElementById('myButton');

// 이벤트 핸들러 함수 정의
function handleClick() {
  alert('버튼이 클릭되었습니다!');
}

// 이벤트 핸들러 함수 등록
button.addEventListener('click', handleClick);

위 예제는 id가 ‘myButton’인 버튼을 선택하고, handleClick 함수를 ‘click’ 이벤트에 등록하는 코드입니다. 버튼을 클릭할 때 handleClick 함수가 실행되어 알림창을 띄우게 됩니다.

이벤트 핸들러 함수 제거

필요에 따라 이벤트 핸들러 함수를 제거할 수도 있습니다.

button.removeEventListener('click', handleClick);

이벤트 객체 활용

이벤트 핸들러 함수에는 이벤트 객체를 전달받을 수 있습니다. 이벤트 객체를 통해 이벤트가 발생한 요소, 마우스 위치, 키보드 입력 등의 정보를 얻을 수 있습니다.

function handleKeyPress(event) {
  console.log('키코드:', event.keyCode);
}
document.addEventListener('keydown', handleKeyPress);

위 예제는 키보드의 키를 누르면 해당 키의 키코드를 콘솔에 출력하는 이벤트 핸들러 함수를 등록하는 코드입니다.

결론

이벤트 핸들러 함수를 활용하면 웹 페이지를 보다 동적으로 만들 수 있습니다. 다양한 상황에서 적절한 이벤트 핸들러 함수를 등록하여 사용자와 상호작용하는 웹 페이지를 만들어보세요.

자세한 내용은 MDN Web Docs를 참고하시기 바랍니다.

[nodejs]