이벤트 시스템은 자바스크립트 어플리케이션에서 핵심적인 역할을 담당합니다. 기본적으로 브라우저에서 제공하는 이벤트들과 함께 사용되며, 커스텀 이벤트를 생성하고 핸들링하는 기능을 제공합니다. 이번에는 프로토타입 체이닝을 이용하여 간단한 커스텀 이벤트 시스템을 구현해보겠습니다.

프로토타입 체이닝

프로토타입 체이닝은 자바스크립트에서 객체 간의 상속을 구현하는 방법 중 하나입니다. 프로토타입 체이닝을 이용하면 부모 객체의 프로퍼티와 메서드를 자식 객체에서 사용할 수 있습니다. 이를 통해 상속을 통한 코드 재사용과 구조적인 설계를 할 수 있습니다.

커스텀 이벤트 시스템 구현

아래는 프로토타입 체이닝을 이용한 간단한 커스텀 이벤트 시스템의 예제 코드입니다.

function EventEmitter() {
  this.events = {};
}

EventEmitter.prototype.on = function(eventName, callback) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(callback);
}

EventEmitter.prototype.emit = function(eventName, data) {
  if (this.events[eventName]) {
    this.events[eventName].forEach(function(callback) {
      callback(data);
    });
  }
}

// 사용 예시
var eventEmitter = new EventEmitter();

eventEmitter.on('customEvent', function(data) {
  console.log('Custom Event:', data);
});

eventEmitter.emit('customEvent', 'Hello World');

위의 코드에서 EventEmitter 함수는 on 메서드와 emit 메서드를 가지고 있습니다. on 메서드는 지정한 이벤트 이름에 해당하는 콜백 함수를 등록하는 역할을 하고, emit 메서드는 등록된 콜백 함수들을 호출하는 역할을 합니다.

위의 사용 예시를 보면, customEvent라는 이름의 이벤트를 등록하고, 해당 이벤트가 발생할 때마다 'Custom Event: '와 데이터를 출력하는 콜백 함수가 실행되는 것을 볼 수 있습니다.

마무리

프로토타입 체이닝을 이용한 커스텀 이벤트 시스템을 구현해보았습니다. 이번 예제는 간단한 형태의 이벤트 시스템이지만, 이를 기반으로 더 복잡한 기능을 추가할 수 있습니다. 이벤트 시스템을 잘 이용하면 더 유연하고 모듈화된 자바스크립트 어플리케이션을 개발할 수 있습니다.

다음 포스트에서는 이벤트 버블링과 캡쳐링에 대해 알아보도록 하겠습니다.

References

• MDN Web Docs - Inheritance and the prototype chain