자바스크립트(JavaScript) - 커스텀 이벤트(CustomEvent)

글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.!

자바스크립트에서 DOM을 조작할 때 기본적으로 지원하는 이벤트가 아닌 직접 원하는 때에 이벤트를 발생하고 싶을 때 사용되는 커스텀 이벤트를 알아보겠습니다. 

 

커스텀 이벤트는 원하는 때에 발생시킬 수 있습니다. 또한 해당 이벤트에 대한 정보를 추가할 수도 있습니다.

 

기본적으로 이벤트를 생성하는법을 알아보겠습니다.

 

이벤트 생성

이벤트 생성은 Event객체를 통해 만들 수 있습니다. Event 객체는 기본적인 이벤트들의 부모 객체입니다. 클릭이벤트나 마우스 이벤트 같은 것들 모두 Event객체를 상속받고 있습니다.

 

const e = new Event("click");
const ev = new Event("click" {"bubbles":true,"cancelable":true});

이렇게 이벤트를 생성 할 수 있고 인수로는 첫 번째 이벤트 이름, 두 번째 해당 이벤트의 속성입니다.

속성으로는 bubbles, cancelable, composed 속성이 있습니다.

bubbles 속성은 이벤트를 버블링을 할 것인지를 나타냅니다. 기본값은 false입니다.

cancelable 속성은 이벤트를 취소 할 수 있는지 나타냅니다. 기본값은 false입니다.

composed 속성은 

 

이렇게 만들어진 이벤트를 실행 하고싶다면 해당 메서드를 실행합니다.

const e = new Event("click");
document.dispatchEvent(e);

dispatchEvent() 메서드를 이용해 만들어진 이벤트를 실행합니다. 

 

현재 상태는 이벤트가 호출되고 호출되었을때 동작하는 것이 없기 때문에 그냥 호출만 됩니다.

 

해당 이벤트를 실행하고 싶다면 원하는 요소에 이벤트를 걸어주고 dispatchEvent() 메서드를 호출하면 됩니다.

<button id="test">test</button>

let btn = document.getElementById("test");
btn.addEventListener("click", () => { alert("클릭"); });

const e = new Event("click");
btn.dispatchEvent(e);

Event를 상속받은 여러 이벤트도 생성이 가능합니다. (MouseEvent나 PointerEvent 등)

let test = document.getElementById("test");
test.addEventListener("click",(e)=>{
    alert("이벤트");
})
let e = new MouseEvent("click",{
    clientX:100,
    clientY:100
})
test.dispatchEvent(e);

이벤트 객체에 두 번째 인수로는 해당 이벤트의 속성의 초기값을 설정할 수 있습니다. 모든 속성의 값을 설정 할 수는 없습니다. 해당 부분은 해당 이벤트 API 문서를 참조하시기 바랍니다.

 

다음으로는 커스텀 이벤트입니다.

 

커스텀 이벤트 생성

 

커스텀 이벤트라고 해서 달라진 건 별로 없습니다. 이벤트와 마찬가지로 객체를 생성하고 이벤트가 발생할 때 넘겨줄 값을 지정하면 되며 호출은 똑같이 dispatchEvent() 메서드를 호출하면 됩니다.

 

사용자 정의 이벤트는 CustomEvent 객체로 생성할 수 있습니다.

let test = document.getElementById("test");
test.addEventListener("change",(e)=>{
    alert("변경");
})
let e = new CustomEvent("change");
test.dispatchEvent(e);

CustomEvent 객체의 생성자 인수는 첫 번째 이벤트가 발생될 이벤트 이름, 두 번째 이벤트가 발생될 때 넘겨주는 정보 값입니다.

new CustomEvent("change",{detail: { str: "띵동" }});

두 번째 인수에는 detail 객체로 이루어져 있으며 detail 객체 안에 필요한 값들을 정의하여 넘겨줄 수 있습니다.

let test = document.getElementById("test");
test.addEventListener("change",(e)=>{
    alert(e.detail.str);
})
let e = new CustomEvent("change",{detail: { str: "띵동" }});
test.dispatchEvent(e);

// -> 띵동

dispatchEvent() 메서드를 이벤트가 발생될 위치에서 메서드를 적절하게 호출하여 사용하면 됩니다.

 

참고

https://developer.mozilla.org/ko/docs/Web/API/Event

https://developer.mozilla.org/ko/docs/Web/API/CustomEvent/CustomEvent