[TIL] CustomEvent로 브라우저와 소통하기(+Event와의 차이점)

회사 서비스 내 특정 이벤트를 외부에서 트리거하는 로직 관련하여 고민하고 해결한 경험들을 토대로 주요 개념인, Event 와 CustomEvent 인터페이스를 정리하였다.

간략한 배경은 다음과 같다.

문제점 :

우리 서비스를 고객사 프로젝트에 script로 삽입하여 호출하는 방식으로 구현되어 있는데,
서비스 자체 이벤트들은 자체 내부적으로만 트리거 되기 때문에, 외부에서 해당 이벤트를 유발할 수 없도록 구현되어 있었다.

해결 방법 :

1. 우리 서비스 내부 이벤트를 트리거할 수 있는 외부 이벤트를 만들어(CustomEvent)
2. 브라우저에 해당 이벤트 접근 경로를 제공하고(widget 내 함수 형태로)
3. 해당 CustomEvent를 동작시켰을 때, 우리 서비스의 특정 이벤트가 트리거되도록 로직을 구현함으로써 해결해낼 수 있었다.

커스텀 이벤트는 Event 또는 CustomEvent 인터페이스 생성자 함수를 통해 생성될 수 있다.

Event

• 일반적으로 유저가 클릭(click)했을 때, 특정 이벤트가 실행하도록 하는 addEventListener의 첫 번째 인자인 이벤트(예시에서의 click)를 직접 만들 수 있도록 하는 기능이 Event() 생성자다.

 const myEvent = new Event("myCustomEvent")
 document.addEventListener("myCustomEvent", e => {
   console.log(e)
 })
 // dispatch를 통해 이벤트를 트리거(동작)시킨다.
 document.dispatchEvent(myEvent)

CustomEvent

• 부모 인터페이스인 Event의 속성을 상속한다.
• 차이점은 두 번째 인자로 객체가 들어가는데, 해당 객체에 detail 프로퍼티를 추가하여 해당 detail 정보를 이벤트에 전달할 수 있다.
• 다른 이벤트 프로퍼티와의 충돌을 피하기 위해서 CustomEvent 내부에서 사용하는 정보를 detail에 명시한다.

const test = new CustomEvent("test", {
      detail: {
        name : "홍길동"
      },
    }
  );

document.addEventListener("test", (e) => {
 	console.log(e.detail.name) // 홍길동
})

document.dispatchEvent(test)

공통 사항

• Event와 CustomEvent의 공통 속성 및 요소들

1. type : 이벤트 명 (string)
2. options : bubbles, cancelable, composed, detail(CustomEvent만 제공) 등 세부 속성을 정의 (object)

const test = new CustomEvent(type[, options]);
  );

• 우리 서비스의 경우, DOM에서 발생한 커스텀 이벤트를 감지할 수 있도록 버블링 현상을 허용하도록 하였다. bubbles : true

참고
MDN - Event()
WebDevSimplified