자바스크립트 이벤트(Event) 객체와 커스텀 이벤트 (Custom Event) 란?

자바스크립트 이벤트(Event) 객체와 커스텀 이벤트(Custom Event) 란?

• 자바스크립트는 브라우저에서 이벤트 콜백을 통해 화면(DOM)과 함께 상호작용 하는 일이 잦다.
  • 흔히 사용되는 이벤트로 클릭, 마우스 움직임, 키 입력, 양식 제출 등이 있다.
• 기본 이벤트 중 필요한 이벤트가 없거나 특수한 이벤트를 만들고 싶을 때 커스텀 이벤트(Custom Event) 를 만들 수 있다.
  • 이를테면 동영상 플랫폼에서는 동영상을 재생하는 이벤트나 일시정지하는 이벤트 등을 만들 수 있다.

MDN Event 공식문서의 Interfaces based on Event 항목 을 보면, 자바스크립트 이벤트를 기반으로 한 인터페이스가 아주 많다. 원하는 이벤트가 있는지 먼저 찾아보면 된다.

커스텀 이벤트 사용 방법

1. 이벤트를 정의한다.
2. 이벤트 리스너를 등록한다.
3. 이벤트를 디스패치(dispatch) 하여 이벤트를 발동시킨다.
4. (필요에 따라) 이벤트 리스너를 해제한다.

1. 이벤트 (Event) 정의

• new Event("이벤트명") 으로 이벤트를 정의할 수 있다.
• 과거엔 document.createEvent("이벤트명") 메서드도 많이 이용됐다.
  • Document: createEvent() method 로도 정의가 가능한데, 요새 관련 메서드들이 deprecated 되는 추세이다.

const customEvent = new Event("customEvent");

2. 이벤트 리스너 (Event Listener) 등록

• click 과 같은 일반적인 이벤트에 대해 리스너를 등록하는 것과 별반 차이는 없다.
• 해당 DOM 요소는 이제 이벤트가 dispatch 되었을 때 콜백함수를 호출하게 된다.
• 리스너를 등록할 때 첫번째 인자는 생성자에서 사용했던 문자열을 그대로 이용해야 함을 주의하자.
  • 나중에 이벤트를 전달할 때는 이벤트 객체 자체를 전달해주어야 한다.

button.addEventListener("customEvent", function (e) {
  console.log("customEvent has been triggered");
});

3. 이벤트 전달 (Event Dispatch)

• 보통 브라우저를 통한 상호작용으로 이벤트를 전달 (dispatch event) 하는 것이 익숙한데, 여기서는 코드로 한다고만 살짝 변형해서 생각하면 된다.
• 여기서 dispatchEvent() 의 인자가 Event 객체 자체임을 주의하자.
  • 이전에 리스너에서는 문자열로 리스너를 등록했던 것과 비교된다.

const button = document.getElementById("myButton");
button.dispatchEvent(customEvent);

4. 이벤트 리스너 제거 (Remove Event Listener)

• 이벤트가 전달되더라도 더이상 동작하고 싶지 않게 만들고 싶다면, 이벤트 리스너를 제거하면 된다.

button.removeEventListener("customEvent", function (e) {
  console.log("customEvent has been triggered");
});

고급 사용법

• Event 객체를 상속받아서 멤버 변수나 메서드를 가지는 CustomEvent 클래스를 생성할 수도 있다.

// Event 를 상속한 커스텀 이벤트 클래스 정의
class MyEvent extends Event {
  constructor(key, value) {
    super("myEvent");
    this.key = key;
    this.value = value;
  }

  logData() {
    console.log(`Key: ${this.key}, Value: ${this.value}`);
  }
}

// 커스텀 이벤트 인스턴스 생성하기
const myEvent = new MyEvent("myKey", "myValue");

// 이벤트 리스너 적용
document.addEventListener("myEvent", function (e) {
  console.log("myEvent has been triggered");
  e.logData(); // 이벤트의 메서드를 호출할 수 있다.
});

// 이전과 동일하게 이벤트 전달하기
document.dispatchEvent(myEvent);