커스텀 이벤트

하나의 js 파일에 작성돼있던 코드에서 한 기능을 다른 파일로 분리할 일이 생겼는데,

글로벌 스코프에선 사용할 수 없어 스크립트가 실행하지 못하는 부분은 

async function injectScripts(scriptContainer, useCacheBuster = false) {
    const scripts = scriptContainer.querySelectorAll("script");

    for (const script of scripts) {
        await loadScript(script, useCacheBuster);
    }
}

 

이렇게 util.js에 스크립트를 적용시킬 수 있는 함수를 만들어 적용시키는걸로 해결했다.

 

문제는 index.js라는 파일에서 index_sub.js라는 파일로 코드를 분리시켰다면 

index_sub.js 파일에서 index.js에 있는 함수를 실행시켜야하는 부분이 있었는데 이게 fetch를 하는거라 중복으로 쓸수도 없었다.. 그래서 찾은게 커스텀 이벤트

 

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)

 

addEventListener를 사용하는데, 기존에 있던 이벤트가 아닌 사용자가 직접 생성한 이벤트를 사용하는 것이다. 

나같은 경우엔 index_sub.js에서 

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

이런식으로 커스텀 이벤트를 만들어 강제로 이벤트를 실행시키고,

 

// 이벤트 리스너 추가
  window.addEventListener('eventName', (event) => {
    const { queryString } = event.detail
    somethingFunc(queryString)
  })

index.js 에서 이벤트 리스너를 추가시켰다.