커스텀 이벤트

https://mong-blog.tistory.com/entry/JS-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A5%BC-%EB%A7%8C%EB%93%9C%EB%8A%94-2%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95Event-CustomEvent

[JS] 커스텀 이벤트를 만드는 2가지 방법(Event, CustomEvent)

 

분명 저번에 글을 작성했다고 생각했는데 저장 안하고 껐나보다..

 

커스텀 이벤트를 사용하게 된 경로가

 

프로젝트를 하면서 한 페이지에서 전체적으로 적용되는 index.js 파일,

index.js 파일에서 fetch로 불러오는 sub.html에 적용시키는 sub.js 파일이 있다면

sub.js에서 무언가를 변화시킨 후 sub.html 자체를 다시 불러와야하는데 fetch는 index.js파일에서 작용하고 있으니 그걸 연결시켜 주는 역할로 사용했다.

 

sub.js에서 커스텀한 이벤트를 dispatchEvent로 강제 발생시킨 후

// 커스텀 이벤트
const event = new CustomEvent('sampleClick', {
  detail: { queryString },
});
sampleListInfo.dispatchEvent(event);

 

index.js에서 해당 이벤트가 발생 시의 작동할 코드를 addEventListener로 정의해준다.

  // 이벤트 리스너 추가
  sampleListInfo.addEventListener('sampleClick', (e) => {
    const { queryString } = e.detail;
    fetchList(queryString);
  });