1. 커스텀 이벤트란?
- 사용자가 직접 정의한 이벤트입니다.
- 미리 정의된 이벤트가 아닌 사용자가 필요한 특정한 상황에 따라 발생시킵니다.
2. 커스텀 이벤트의 사용
- 프로그래밍 언어와 플랫폼마다 지원 여부는 다를 수 있습니다.
- 주로 웹 프로그래밍에서 자주 사용됩니다.
- 코드의 가독성과 유지보수성을 높이는데 유용합니다.
3. 커스텀 이벤트의 생성과 발생
- 자바스크립트에서는
CustomEvent객체를 사용하여 커스텀 이벤트를 생성합니다. dispatchEvent메소드를 사용하여 이벤트를 발생시킵니다.
4. 커스텀 이벤트 핸들러 함수 등록
addEventListener메소드를 사용하여 이벤트 핸들러 함수를 등록하여 이벤트를 처리할 수 있습니다.- 핸들러 함수에서는 이벤트에 대한 처리를 수행합니다.
5. 커스텀 이벤트의 예시
- 클릭, 마우스 오버 등 미리 정의된 이벤트 외에도, 특정 요소의 크기나 위치 변경, 비동기 작업의 완료 등 다양한 상황에 따라 커스텀 이벤트를 정의하여 사용할 수 있습니다.
6. 커스텀 이벤트의 장단점
- 장점: 프로그램에서 특정한 상황이나 조건에 대한 처리를 수행할 때 매우 유용하며, 코드의 가독성과 유지보수성을 높일 수 있습니다.
- 단점: 미리 정의된 이벤트보다 코드를 작성해야 하므로 초기 개발 시간이 더 오래 걸릴 수 있다. 또한, 이벤트 핸들러 함수가 많이 등록되어 있을 경우 성능 저하가 발생할 수 있습니다.
7. 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Event Example</title>
</head>
<body>
<div id="box">Click me!</div>
<script>
// 1. 커스텀 이벤트 생성
const customEvent = new CustomEvent('customClick', {
bubbles: true,
detail: { message: 'Hello Custom!' }
});
// 2. 이벤트 핸들러 함수 등록
const box = document.getElementById('box');
box.addEventListener('customClick', function(event) {
console.log(event.detail.message);
});
// 3. 커스텀 이벤트 발생
box.addEventListener('click', function() {
this.dispatchEvent(customEvent);
});
</script>
</body>
</html>CustomEvent객체를 사용하여customClick이라는 이름의 커스텀 이벤트를 생성합니다.bubbles와detail옵션을 설정하여 버블링을 활성화하고 이벤트 데이터를 추가합니다.id가box인 요소에 대해customClick이벤트 핸들러 함수를 등록합니다. 이벤트 핸들러 함수에서는 콘솔에detail.message값을 출력합니다.click이벤트가 발생하면box요소에서customClick이벤트를 발생시킵니다.
이 예제 코드를 실행하면, box 요소를 클릭하면 콘솔에 Hello Custom!이라는 메시지가 출력됩니다. 이벤트 핸들러 함수에서는 event.detail 속성을 통해 이벤트 데이터에 접근할 수 있습니다.
프론트엔드 공부하고 있는 정우시입니다.