HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive/
🌞
JS/
이벤트 생성, CustomEvent, dispatchEvent

이벤트 생성, CustomEvent, dispatchEvent

Status
Done
Tags
이벤트
DOM
날짜
Oct 25, 2023 03:15 AM
  • 이벤트 생성 : 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, dispatchEvent 사용 예시 *
// 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"가 기록됨