커스텀 이벤트 디스패치

• JS 로 이벤트 객체 만들어서 직접 이벤트 생성

• Event(name, options) 클래스로 이벤트 객체 생성

• elem.dispatchEvent(event) 이벤트 객체 생성한 뒤 호출해 요소에 있는 이벤트 반드시 ‘실행’ 시켜줘야 핸들러가 일반 브라우저 이벤트처럼 이벤트에 반응가능

• event.isTrusted 사용해 이벤트가 스크립트를 통해 생성한 이벤트인지 ‘진짜’ 사용자가 만든 이벤트인지 알 수 있음

• 네이티브 이벤트를 직접 만들 경우 네이티브 이벤트 생성자로 만들어야 하며 이벤트 특유의 프로퍼티 가짐

• CustomEvent 로 이벤트 직접만들기 가능하며 추가 프로퍼티로 detail 명시하여 이벤트 관련 정보 저장 가능하며 모든 핸들러에서 event.detail 통해 정보 얻음

• 커스텀 이벤트 이름을 내장 이벤트 처럼 지을 수 있긴 하지만 충돌할 수 있으므로 지양 (서드파티 라이브러리가 네이티브 이벤트 만드는 것 이외에 상호작용 할 수 없거나 테스팅 자동화의 경우만 허용)

• 이벤트가 기본동작 취소 시 elem.dispatchEvent(event) 호출 시 false 가 반환되고 해당 이벤트를 디스패치 하는 코드에서 기본동작 취소되는것 인지함

• 이벤트는 대게 큐에서 처리됨

• 이벤트 안 이벤트는 동기적으로 처리되며 비동기적으로 처리도 가능