커스텀 이벤트 디스패치

자바스크립트를 사용하면 핸들러를 할당할 수 있을 뿐만 아니라 이벤트를 직접 만들 수도 있다.

Event의 생성자

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

type – 이벤트 타입을 나타내는 문자열로 "click"같은 내장 이벤트, "my-event" 같은 커스텀 이벤트가 올 수도 있다.

options

bubbles: true/false – true인 경우 이벤트가 버블링된다.
cancelable: true/false – true인 경우 브라우저 '기본 동작’이 실행되지 않는다.
아무런 값도 지정하지 않으면 두 프로퍼티는 기본적으로 {bubbles: false, cancelable: false}처럼 false가 된다.

dispatchEvent

이벤트객체를 생성한 다음엔 elem.dispatchEvent(event)를 호출해 요소에 있는 이벤트를 반드시 '실행’시켜줘야 한다.

이렇게 이벤트를 실행시켜줘야 핸들러가 일반 브라우저 이벤트처럼 이벤트에 반응할 수 있다. bubbles 플래그를 true로 해서 이벤트를 만든 경우 이벤트는 제대로 버블링 된다.

  <button id="elem" onclick="alert('클릭!');">자동으로 클릭 되는 버튼</button>
let event = new Event("click");
elem.dispatchEvent(event);

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

커스텀 이벤트 버블링 예시

<h1 id="elem">Hello from the script!</h1>

<script>
  // 버블링이 일어나면서 document에서 이벤트가 처리됨
  document.addEventListener("hello", function(event) { // (1)
    alert("Hello from " + event.target.tagName); // Hello from H1
  });

  // 이벤트(hello)를 만들고 elem에서 이벤트 디스패치
  let event = new Event("hello", {bubbles: true}); // (2)
  elem.dispatchEvent(event);

  // document에 할당된 핸들러가 동작하고 메시지가 얼럿창에 출력됩니다.

</script>