JS로 핸들러 할당 뿐 아니라, 이벤트를 직접 만들 수 있습니다.

커스텀 이벤트는 그래픽 컴포넌트를 만들 때 사용합니다.
JS기반 메뉴가 있을 때, 메뉴에 open,select 등 이벤트를 달아 상황에 맞게 실행되게 할 수 있습니다.

Event 생성자

내장 이벤트 클래스는 계층 구조를 가지고, 꼭대기엔 Event클래스가 있습니다.
Event 객체는 다음과 같이 생성합니다.

let event = new Event(type[,options]);

type : 이벤트 타입을 나타냅니다. 'click'같은 내장 이벤트나, 커스텀 이벤트가 올 수 있습니다.
options : 세 개의 선택 프로퍼티를 가집니다.

• bubbles : 이벤트의 버블링 여부를 결정합니다.
• canclable : true일 때, 브라우저 기본 동작이 동작하지 않습니다.
• composed : event가 shadow root 바깥의 eventListener 들도 trigger 할 것인지 결정합니다.

지정하지 않는다면, false를 기본으로 합니다.

dispatchEvent

EvnetTarget.dispatchEvent()는 타겟에게 이벤트를 실행시킬 수 있습니다.

button.addEventListener(event=> {
  console.log(event.isTrusted) // false
});

const customEvent = new Event('click');

button.dispatchEvent(customEvent);

이렇게 실행시켜야, 일반 브라우저 이벤트처럼 핸들러가 작동합니다.

event.isTruested를 통해 이벤트가 액션을 통해 일어난 것인지 (true),
스크립트를 통해 일어난 것인지 알 수 있습니다 (false).

다양한 이벤트 클래스

MDN Event reference
문서 하단에 이벤트에 대한 Event Type에서 이벤트 클래스를 확인할 수 있습니다.

• UIEvent
• FocusEvent
• MouseEvent
• WheelEvent
• KeyboardEvent
• 등등..

해당 클래스의 이벤트를 만들 땐, new Event가 아니라 관련 이벤트 클래스를 통해 만들어야 합니다.

관련 생성자를 사용해야만 해당 이벤트 전용 프로퍼티를 명시할 수 있습니다.

생성자의 options에서 마우스 이벤트의 clientX clientY의 프로퍼티를 설정합니다.

const mEvenㅇt = new MouseEvent('click',{clientX:100,clientY:50});

커스텀 이벤트

제대로 된 커스텀 이벤트를 만들기 위해선, CustomEvent를 사용해야 합니다.

Event와 다른 점은 생성자의 두 번째 인자로 CustomEventInit객체를 가집니다.

CustomEventInit 객체는 다음 프로퍼티를 가집니다.

• detail : 이벤트에 관련된 이벤트 의존값입니다. 옵션이며 기본 값은 null입니다.

<h1 id='greeting'>hi yuno</h1>

greeting.addEventListener('hello',event=> {
  console.log(event.detail.name);
})

greeting.dispatchEvent(new CustomEvent('hello',{
  detail : {name:'yuno'}
}));

설정한 detail은 event 객체를 통해 얻을 수 있습니다.