EventTarget 클래스 직접 구현하기: addEventListener부터 dispatch까지

TL;DR#

• DOM 인터페이스와 비슷한 EventTarget 클래스를 직접 구현해 봅니다.
• 이벤트 리스너를 지속적으로 추적하고, 원할 때 이벤트를 dispatch해 실행할 수 있습니다.
• 리스너 저장에 배열 대신 Set을 사용해 중복을 막고 삭제를 간단하게 처리합니다.

만들려는 것#

DOM 인터페이스와 비슷한 EventTarget 클래스를 직접 만들어 봅니다. 이 클래스로 이벤트 리스너를 지속적으로 추적할 수 있고, 이벤트를 dispatch해서 원할 때 실행할 수도 있습니다.

전체 코드#

javascript
복사
class EventTarget {
	// 등록한 이벤트들을 관리할 listeners 객체
  constructor() {
    this.listeners = {};
  }

	// 이벤트 이름과 실행시킬 콜백함수를 인자로 받아서
	// listeners 프로퍼티에 등록
  addEventListener(name, callback) {
		// 처음 등록되는 이벤트라면 Set 생성자를 사용하여 초기값 셋팅
    if(!this.listeners.hasOwnProperty(name)) {
      this.listeners[name] = new Set([callback]);
    } else {
      this.listeners[name].add(callback);
    }
  }
	// name과 add했던 같은 콜백함수를 넣어 원하는 이벤트 삭제
  removeEventListener(name, callback) {
    this.listeners[name].delete(callback);
  }

	// 등록된 name의 이벤트가 있다면 루프를 돌아 모든 콜백함수 실행
  dispatchEvent(name) {
    if(!this.listeners[name]) return;
    for(const callback of this.listeners[name]) {
      callback();
    }
  }
}

짚어볼 포인트#

배열 대신 Set을 사용한 이유#

• 배열로 값을 저장하면 중복값에 대한 처리가 되지 않아, dispatch 시 중복된 연산이 실행될 수 있습니다.
• Set은 기본적으로 값을 기준으로 유니크값을 보장합니다. 또한 배열을 직접 탐색하는 코드를 짜지 않고도 delete 메서드에 삭제하려는 값을 넣어 손쉽고 빠르게 삭제할 수 있습니다.

hasOwnProperty와 in의 차이#

• hasOwnProperty는 자기 자신의 객체에 선언된 프로퍼티만 검사합니다. 반면 in을 사용하면 프로토타입 체인을 타고 올라가 상위 객체의 프로퍼티까지 검사합니다.

Iterable한 Set 자료형#

• Set 자료형은 Iterable한 속성을 가지고 있어 for...of나 forEach 구문으로 바로 순회할 수 있습니다.