[Broswer] EventTarget 과 Event, CustomEvent

EventTarget 인터페이스는 이벤트를 수신할 수 있고, 수신한 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 인터페이스입니다. 즉, 이벤트의 대상이 될 수 있는 객체는 EventTarget의 세 메서드를 구현합니다.

 

DOM Element, document, window 등 은 EventTarget 을 상속받고 있기 때문에, addEventListener() 메서드를 사용하여 이벤트에 콜백을 등록해둘 수 있는 는 것입니다.

 

EventTarget 을 상속하는 새로운 객체 만들기

class EventObj extends EventTarget {
  constructor() {
    super();
  }
}

const eventObj = new EventObj();
eventObj.addEventListener("click", () => {
  console.log("eventObj click");
});

setTimeout(() => {
  eventObj.dispatchEvent(new Event("click"));
}, 1000);

위처럼 EventTarget 을 상속하는 새로운 클래스는 이벤트처리가 가능하도록 아래 3가지 메서드를 구현합니다.

- addEventListener()

- removeEventListener()

- dispatchEvent()

 

Event 객체

EventTarget 은 이벤트를 수신할 수 있습니다. 이 수신기를 발동시키는 것은 Event 인터페이스를 구현한 객체가 dispatchEvent() 의 인자로 함께 호출될 떄입니다.

DOM element 의 클릭, hover .. 등의 이벤트가 사용자의 액션에 의해서 발생할때 이 이벤트를 dispatch 합니다.

각 이벤트마다 Event 인터페이스를 확장하는 형태의 이벤트도 있습니다. 예를들면

class MouseEvent extends Event {}
class DragEvent extends Event {}

이런것들이 있습니다.

단순히 이벤트 객체를 만들어낼 수 있지만, 상세한 속성을 조절해줄 수 도있습니다.

예를들면 버블링이 안되도록 한다던지, 취할수없게하기, currentTarget 을변경하기 등 자세한 것은 문서를 참조해주세요

 

Custom Event  객체

CustomEvent 또한 Event 를 상속하고 있는 객체입니다.

다른 이벤트는 이미 정해진 특정 상황에 대한 데이터를 가지고있어, 커스텀한 데이터를 담아서 전송하기엔 적합하지 않은데요.

이 이벤트는 detail 이라는 옵션에 원하는 데이터를 담아서 전송할 수 있습니다. 아니면 에초에 Event 를 상속하는 자신만의 이벤트를 작성해두어도 되겠죠. 예를 들어 유저가 온라인에 접속했을 때 발생하는 이벤트를 아래처럼 작성해도 될거같네요.

class OnlineEvent extends Event {
	isConnected:boolean;
    ip:string;

}

 

 

아래는 CustomEvent 를 바로 활용한 방법입니다. ping 이라는 이벤트를 수신하면 e.detail 에담긴 데이터를 조회할 수 있습니다.

const eventObj = new EventObj();
eventObj.addEventListener("ping", (e) => {
  console.log(e.detail); // { name: "kong", age: 26 }
});

setTimeout(() => {
  const detail = {
    name: "kong",
    age: 26,
  };
  eventObj.dispatchEvent(new CustomEvent("ping", { detail }));
}, 1000);