[JavaScript] 커스텀 이벤트 만들기

 

코딩 중에 커스텀 이벤트를 쓸 상황이 생겨서 애매하게 알고있던걸 이번 기회에 공부해봤다. 

 

 

커스텀 이벤트 생성 - Event

기존에 존재하는 이벤트(click, mouseover등)를 커스텀으로 변형해서 사용할 수도 있고, 아예 새로운 이름의 커스텀 이벤트를 만들 수도 있다. 

const event1 = new Event('click');
const event2 = new Event('eventname', {
    "bubbles" : true,
    "cancelable" : false,
    "composed" : true
});

bubbles	이벤트 버블링을 하는지 여부 (기본값 false)
cancelable	이벤트를 취소할 수 있는지 여부 (기본값 false)
composed	이벤트가 Shadow DOM 경계를 넘어 표준 DOM으로 전파되는지 여부

composed 속성의 경우, 섀도우 돔 개념을 아직 제대로 이해하지 못해서 그 부분을 더 공부하고 나서 게시글을 업데이트할 예정이다. 

 

커스텀 이벤트 생성 - CustomEvent

이벤트 객체에 데이터를 추가하려면 CustomEvent를 이용하며, detail 속성에 데이터를 추가할 수 있다.

detail는 생략가능하며, 따로 커스텀이 들어가지 않은 이벤트의 detail값은 1이다. 

다른 이벤트들로 해봐도 1이 나온다.

//지정값
const event1 = new CustomEvent('locationchange', { detail: { href: 'about'}});

//dataset에서 가져오는 경우
const event2 = new CustomEvent('passtime', {
	detail: element.dataset.time
});

//detail 옵션 생략
const event3 = new CustomEvent('click');

참고로 커스텀 이벤트 이름을 지을 때 소문자만 사용하는건 제공되는 이벤트의 이름이 그렇게 표현되기 때문에 사용하는 관습적인 표현이다. 대문자를 쓴다고 해서 따로 오류가 나거나 하지는 않는다. 

 

커스텀 이벤트를 사용하기 

이벤트 리스너를 생성한 후, 이벤트를 발생할 위치에서 dispatchEvent()메서드를 호출해주면 된다. 

아래는 화면을 클릭하면 3초 후 clickaftertime이벤트가 발생하며 alert창이 뜨는 코드이다. 

const handleCustomEvent = (e) => {
    alert(`${e.detail.time} seconds passed.`);
};
window.addEventListener("clickaftertime", handleCustomEvent)

window.addEventListener("click", (e) => {
    const clickAfterTimeEvent = new CustomEvent("clickaftertime", {detail:{ time: 3}});
    setTimeout(()=>{ window.dispatchEvent(clickAfterTimeEvent)}, 3000);
});

 

지원 브라우저 

다만 인터넷 익스플로러의 특정 버전에서는 위의 두 방법이 지원되지 않기 때문에, 여기까지 고려하려면 Document.createEvent()를 사용해야 한다.

 

 

---

참고 자료

MDN docs https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events

모던 자바스크립트 https://ko.javascript.info/dispatch-events