[javascript] 커스텀 이벤트 핸들러 함수

18 Dec 2023

javascript

웹 페이지나 앱에서는 종종 사용자 지정 이벤트를 정의하고 처리해야 할 때가 있습니다. Javascript에서는 CustomEvent 객체를 사용하여 이러한 사용자 지정 이벤트를 생성할 수 있습니다. 그리고 해당 이벤트를 처리하기 위한 핸들러 함수를 작성할 수 있습니다.

커스텀 이벤트 생성

먼저, CustomEvent를 사용하여 커스텀 이벤트를 생성합니다. 이때, 이벤트의 이름과 옵션을 지정하여 이벤트 객체를 생성합니다.

// 사용자 지정 이벤트 생성
var customEvent = new CustomEvent('customEventName', {
  detail: { key: 'value' },
  bubbles: true,
  cancelable: true
});

커스텀 이벤트 핸들러 함수

다음으로, 위에서 생성한 커스텀 이벤트를 처리하기 위한 핸들러 함수를 작성합니다. addEventListener를 사용하여 해당 이벤트를 대기하고, 이벤트가 발생했을 때 실행될 함수를 지정합니다.

// 커스텀 이벤트 핸들러 함수
function handleCustomEvent(event) {
  console.log('Custom event occurred with detail: ', event.detail);
}

// 커스텀 이벤트 리스너 등록
document.addEventListener('customEventName', handleCustomEvent);

이제 해당 이벤트가 발생하면, handleCustomEvent 함수가 실행되어 커스텀 이벤트의 내용을 처리하게 됩니다.

커스텀 이벤트를 생성하고 핸들러 함수를 작성하여 사용자 지정 이벤트를 처리하는 방법에 대해 알아보았습니다. 유용하게 활용될 수 있는 기능이니, 필요할 때 활용해보시기 바랍니다.

커스텀 이벤트 생성

커스텀 이벤트 핸들러 함수

References