JS 커스텀 이벤트(custom Event) 생성 및 실행(dispatchEvent)

JS는 내장되어있는 click, mouseover 등의 이벤트 뿐 만 아니라 커스텀 이벤트를 생성하여 핸들러를 할당할 수 있다. 이는 루트 혹은 특정 엘리먼트에 이벤트 핸들러를 달아 이벤트 리스닝을 통하여 사용된다.

 

이벤트란

JS 내에서 말하는 event란 어떤 HTML 요소에 대해 사건이 발생한다는 것을 의미한다. 이 사건은 'click'일 수도 있고, 'mouseover'일 수도 있으며, 그 외 다른 어떤 것일 수 있는데, 이 이벤트들은 js에 기본적으로 내장되어있다.

 

커스텀 이벤트

기본적으로 내장된 이벤트 외에 직접 이벤트를 생성할 수도 있는데, 이를 커스텀 이벤트라고 일컫는다. custom Event는 다음과 같이 생성한다.

다음은 'animalfound'라는 이름의 이벤트를 생성하는 코드이다.

const catFound = new CustomEvent('animalfound', {
  detail: {
    name: 'cat'
  }
});

두번째 인자인 detail은 이벤트 내에 포함할 이벤트의 세부 정보를 나타내는 값으로 default는 null로 설정된다. 이벤트 명은 필수값이지만 그 외의 옵션은 필수값이 아니다. detail 내부에는 어떠한 값도 포함시킬 수 있지만 'detail'라는 이름이 변경되어서는 안된다. (지정값)

다음과 같은 형식으로 해당 값에 접근할 수 있다.

obj.addEventListener('animalfound', (e) => console.log(e.detail.name));

 

EventTarget.dispatchEvent()

자유롭게(?) 생성한 커스텀 이벤트는 dispatchEvent() 메서드를 통하여 실행시킬 수 있다. 

obj.dispatchEvent(catFound);

여기서 obj는 이벤트를 발생시키려는 요소를 의미하며, 루트 혹은 특정 엘리먼트 등이 자리에 올 수 있다.

모든 것을 조합하여 볼 때, 다음과 같은 코드는 콘솔에 'cat'을 찍는다고 유추 할 수 있다.

// CustomEvent 생성
const catFound = new CustomEvent('animalfound', {
  detail: {
    name: 'cat'
  }
});

// 적합한 이벤트 수신기 부착
obj.addEventListener('animalfound', (e) => console.log(e.detail.name));

// 이벤트 발송
obj.dispatchEvent(catFound);

참고로 이벤트 호출 시, eventListener들은 동기적으로 이를 수행한다. 이와 반대로 브라우저가 발송하는 네이티브 이벤트는 비동기적으로 이벤트를 처리한다.

eventTarget.dispatchEvent()를 호출하기 전 event 생성자로 이벤트를 생성 및 초기화가 선행되어야 한다.