커스텀 이벤트

자바스크립트 과제를 진행하던 중 CustomEvent 생성자를 통해 직접 원하는 이벤트를 구현하고 설정할 수 있다는 것을 알게 되었다. 😶

step1. new CustomEvent()

event = new CustomEvent(typeArg, customEventInit);

커스텀 이벤트의 경우 두개의 인수를 받는다.

• typeArg
  • 이벤트 이름
• options
  • 객체형으로 detail라는 프로퍼티를 추가해 커스텀 이벤트 관련 정보를 명시하고, 정보를 이벤트에 전달할 수 있다.
  • detail은 readonly 속성으로, 처음 이벤트 생성할 때에만 값을 넣어줄 수 있다.

예시

<h1 id="elem">이보라님, 환영합니다!</h1>

<script>
  // 추가 정보는 이벤트와 함께 핸들러에 전달됩니다.
  elem.addEventListener("hello", function(event) {
    alert(event.detail.name);
  });

  elem.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "보라" }
  }));
</script>

step2. addEventListener()

생성한 이벤트가 실행될 수 있도록 addEventListener()를 통해 이벤트를 실행시켜준다.

EventTarget.addEventListener(typeArg, listener);

stpe3. dispatchEvent

이벤트 생성자를 통해 이벤트 객체를 생성한 이후에는 dispatchEvent(event)를 호출함으로써 이벤트를 실행시킬 수 있다.

EventTarget.dispatchEvent(event);

---

참고자료
모던 자바스크립트 튜토리얼
자바스크립트, 커스텀이벤트 생성하기