[JavaScript] CustomEvent

JavaScript를 사용하면 핸들러를 할당할 수 있을 뿐만 아니라 이벤트를 직접 만들 수 있습니다.

내장 이벤트 클래스는 DOM요소 클래스 같이 계층 구조를 형성합니다. 내장 이벤트 클래스 계층의 꼭대기엔 Event 클래스가 존재합니다.

이벤트 객체는 아래와 같이 생성가능합니다.

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

인수는 다음과 같습니다.

• type: 이벤트 타입을 나타내는 문자열로 'click'같은 내장이벤트, 'my-event' 같은 커스텀 이벤트가 올 수도 있습니다.
• options: 두 개의 선택 프로퍼티가 있는 객체가 옵니다.
  • bubbles: true /false 이벤트 버블링
  • cancelabe: true/ false true인 경우 브라우저 기본동작이 실행되지 않습니다.

아무값도 지정하지 않으면 기본적으로 둘다 false입니다.

이벤트 객체를 생성한 다음엔 elem.dispatchEvent(event)를 호출해 요소에 있는 이벤트를 반드시 실행시켜줘야합니다. 이렇게 이벤트를 실행시켜줘야 핸들러가 일반 브라우저 이벤트처럼 이벤트에 반응할 수 있습니다. bubbles flag를 true로 해서 이벤트를 만드는 경우 이벤트는 버블링 됩니다.

<button id="elem" onclick="alert('클릭!');">자동으로 클릭 되는 버튼</button>

<script>
  let event = new Event("click");
  elem.dispatchEvent(event);
</script>

event 의 isTrusted 속성을 사용하면 이벤트가 스크립트를 통해 생성한 이벤트인지 진짜 사용자가 만든 이벤트인지 알 수 있습니다. event.isTrusted 프로퍼티가 true이면 사용자 액션을 통해 만든 이벤트라는 것을 의미합니다. isTrusted가 false이면 해당 이벤트가 스크립트를 통해 생성되었다는 것을 알 수 있습니다.