[Javascript] 커스텀 이벤트 다뤄보기

js에서 customEvent로 이벤트를 직접 만들 수 있다는 것을 알게 되었다.

 

 

기본적으로 아래와 같이 사용할 수 있다.

document.addEventListener("welcome", () => {
  //이벤트 수신중. 호출되면 아래의 console.log 출력
  console.log("Welcome!");
});

const customEvent = new CustomEvent("welcome"); // 이벤트 생성

document.dispatchEvent(customEvent); // 이벤트 요청

 

document에서 welcome이라는 이벤트를 수신하고있고

document에서 해당 이벤트 호출 시 함수가 실행된다.

 

커스텀 이벤트 호출의 조건은 new CustomEvent('이벤트이름')으로 이벤트를 생성하고

dispatchEvent로 해당 이벤트를 호출해주면 된다.

 

아래와 같이 줄여서 사용할 수도 있다.

document.addEventListener("welcome", () => {
  console.log("Welcome!");
});

document.dispatchEvent(new CustomEvent("welcome"));

 

부모자식 관계에서도 커스텀 이벤트를 활용할 수 있으며

파라미터로 값 또한 넘겨 받을 수 있다.

 

<div class="box">
  <button>버튼</button>
</div>

const box = document.querySelector(".box");
const button = document.querySelector("button");

box.addEventListener("welcome", (event) => {
  // 부모가 이벤트를 Listen
  console.log(event.detail.name);
});

button.addEventListener("click", function () {
  this.dispatchEvent( // 여기서 this는 button
    new CustomEvent("welcome", {
      //자식이 커스텀 이벤트를 만들고 전송
      bubbles: true,
      detail: { name: "Jay" },
    })
  );
});