CustomEvent, dispatchEvent

jiseong·2022년 7월 15일

T I Learned

목록 보기

290/291

다음의 그림과 같이 탭을 클릭할 때 선택한 탭에 맞는 화면을 그려주는 역할을 컨트롤러에서 하고 싶어 방법을 찾아보다가 CustomEvent와 dispatchEvent()메서드를 활용하게 되었다.

CustomEvent를 활용하면 일반적인 내장이벤트말고 탭변경에 대한 이벤트를 구분할 수 있고 dispatchEvent()를 호출하면 바깥 코드에서도 이벤트 리스닝을 통해 파악할 수 있게 되어 view에서 이벤트를 전파시켜 controller에서 해당 이벤트에 대한 로직을 처리할 수 있게 된다.

물론 기존의 내장이벤트로 처리가 가능하지만 커스텀 이벤트의 장점이라고 한다면 이벤트를 전파하시는 시점이 자유롭고 나만의 이벤트명을 만듬으로서 구분이 명확하다는 점이다.

CustomEvent의 사용법은 크게 3가지로 나눌 수 있다.

CustomEvent 생성

이벤트의 이름을 나타낼 문자열과 전파시에 함께 보내줄 세부정보를 포함시켜 나만의 커스텀 이벤트를 만들 수 있다.

const event = new CustomEvent(typeArg, options);

나의 경우에는 어느 탭을 클릭했는지에 대한 정보를 포함시켜주었다.

// tabView.ts
handleTabClick(event: Event) {
  const tab = (event.target as HTMLButtonElement).id;
  emit(this.element, '@change', { tab });
}

function emit(target: HTMLElement, typeArg: string, detail: any) {
  const event = new CustomEvent(typeArg, { detail });
  target.dispatchEvent(event);
}

적합한 이벤트 수신기 부착

커스텀 이벤트 또한 addEventListener으로 핸들링해야 한다.

EventTarget.addEventListener(typeArg, listener);

이벤트 핸들러에 이벤트가 감지되었을 때, 위에서 포함된 세부정보에 접근하기 위해서는 event.detail속성을 활용하면 된다.
// controller.ts
this.tabView.on('@change', (event: Event) => 
  this.changeTab((event as CustomEvent).detail.tab));

// tabView.ts
on(eventName: string, handler: (event: Event) => void) {
  this.element.addEventListener(eventName, handler);
}