이벤트 생성, CustomEvent, dispatchEvent

• 이벤트 생성 : new Event(type[, options])
• type : 이벤트의 이름
• options: bubbles, cancelable 등 설정 가능
 

• CustomEvent
• CustomEvent(typeArg[, options]);
• typeArg : 이벤트의 이름
• options의 "detail": 이 이벤트 내에 포함할, 이벤트의 세부 정보를 나타내는 값. 기본 값은 null
⇒ e.detail.name로 접근 가능
• 그 외에도 Event의 option들을 options로 지정할 수 있다
• 부모 인터페이스 : Event

• dispatchEvent
• dispatchEvent(event);
• eventTarget의 인스턴스 메서드
• 또 다른 인스턴스 메서드로는 addEventListener, remove~가 있다.
• window나 dom객체 등이 타겟이 될 수 있다
• 해당 이벤트에 대해 등록된 이벤트 리스너들을 순서대로 호출한다
• 커스텀 이벤트(=합성 이벤트) 생성 후 해당 이벤트를 발생시키는 것이다.
 

// CustomEvent 생성
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// 적합한 이벤트 수신기 부착
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// 이벤트 발송
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// 콘솔에 "cat"과 "dog"가 기록됨