커스텀 이벤트

이벤트 생성자 (Event 객체)

기존의 이벤트 객체를 활용하여 버블링, 기본동작 등을 조정하기 위해 사용한다.

new Event(type [, options]);

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

options : 두 개의 선택 프로퍼티가 있는 객체가 온다.

• bubbles: true/false – true인 경우 이벤트가 버블링 된다.
• cancelable: true/false – true인 경우 브라우저 '기본 동작’이 실행되지 않는다.

아무런 값도 지정하지 않으면 두 프로퍼티는 기본적으로 {bubbles: false, cancelable: false}처럼 false가 됩니다.

커스텀 이벤트 생성자 (이벤트객체)

new CustomEvent(type, { detail: { 키: 밸류 } })

CustomEvent의 두 번째 인수엔 객체가 들어갈 수 있는데, 개발자는 이 객체에 detail이라는 프로퍼티를 추가해 커스텀 이벤트 관련 정보를 명시하고, 정보를 이벤트에 전달할 수 있습니다.

데이터는 addEventListener메서드 안, event.detail에서 조회할 수 있다.

이벤트 생성자 (event trigger or event dispatcher)

// elem.dispatchEvent(event객체)

window.dispatchEvent(new Event('click'));

사용예제

// 이벤트를 발생시킬 곳에서 이벤트 정의 후 이벤트 발생시키기
window.dispatchEvent(new Event('route-change'), {
        detail: {
          id
        },
      });

// 이벤트를 캐치할곳에서 이벤트 리슨하여 처리하기
window.addEventListener('route-change', nextUrl => {
    history.pushState(null, null, nextUrl);
    this.route();
  });