TIL - 20220904

 오늘은 모던 JavaScript 튜토리얼에서 커스텀 이벤트 디스패치에 대해 공부했다. 작성한 질문은 다음과 같다.

 Event 객체는 Function과 같은 생성자 함수로 만들 수 있다.

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

 

여기서 type, options는 다음과 같다.

• type: 이벤트 타입을 뜻하며 click과 같은 내장 이벤트 혹은 커스텀 이벤트를 넣을 수 있다.
• options: 이벤트가 버블링 될지 설정하는 bubbles 프로퍼티와 브라우저의 기본 동작을 실행할지 설정하는 cancelable 프로퍼티가 있는 객체이며 이 객체는 선택이다. 설정하지 않을 경우 두 프로퍼티 모두 false가 된다.

 

 이벤트 객체를 생성한 다음에 dispatchEvent를 호출해 요소에 있는 이벤트를 반드시 실행시켜야 핸들러가 일반 브라우저 이벤트처럼 반응할 수 있다.

 

 new Event를 통해 커스텀 이벤트를 만들 수 있지만 제대로 된 커스텀 이벤트를 만들려면 new CustomEvent를 사용해야 한다. CustomEvent의 두 번째 인수엔 객체가 들어갈 수 있고 detail이라는 프로퍼티를 추가하여 커스텀 이벤트의 정보를 설정하고 정보를 이벤트에 전달할 수 있다.