이벤트 핸들링은 웹 개발에서 매우 중요한 부분입니다. 특정 이벤트가 발생하면 원하는 동작을 수행하기 위해 이벤트 핸들러를 사용합니다. 대부분의 경우 기본 제공되는 이벤트 핸들러가 있지만, 때로는 커스텀 이벤트 핸들러를 개발해야 할 필요가 있습니다.

이번 포스트에서는 프로토타입을 사용하여 자바스크립트에서 커스텀 이벤트 핸들러를 개발하는 방법을 알아보겠습니다.

프로토타입 기반 객체 생성

먼저 커스텀 이벤트 핸들러를 개발하기 위해 프로토타입 기반 객체를 생성해야 합니다. 다음과 같이 EventEmitter라는 이름의 프로토타입 객체를 생성합니다.

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

EventEmitter 객체는 events라는 빈 객체 속성을 가지고 있습니다. 이 객체는 이벤트 이름을 키로 사용하여 해당 이벤트에 연결된 핸들러 함수를 값을으로 가지게 됩니다.

이벤트 핸들러 등록

이제 EventEmitter 객체에 이벤트 핸들러를 등록하는 메서드를 추가해보겠습니다. 다음과 같이 on 메서드를 정의합니다.

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

on 메서드는 eventName과 handler를 인자로 받습니다. 이 메서드는 eventName에 해당하는 이벤트 배열이 없으면 새로 배열을 생성한 뒤 handler를 추가합니다.

이벤트 핸들러 호출

이벤트가 발생하면 해당 이벤트에 등록된 핸들러를 호출해야 합니다. 이를 위해 EventEmitter 객체에 emit 메서드를 추가합니다.

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

emit 메서드는 eventName과 data를 인자로 받습니다. 먼저 eventName에 해당하는 핸들러 배열을 가져오고, 배열이 존재한다면 각 핸들러에 data를 인자로 전달하여 호출합니다.

커스텀 이벤트 핸들러 사용

이제 커스텀 이벤트 핸들러를 사용해보겠습니다. 다음 예제는 EventEmitter를 상속한 Counter 객체를 생성하고, increment 메서드를 이벤트로 등록한 후 호출하는 예제입니다.

function Counter() {
  EventEmitter.call(this);
  
  this.count = 0;
}

Counter.prototype = Object.create(EventEmitter.prototype);
Counter.prototype.constructor = Counter;

Counter.prototype.increment = function() {
  this.count++;
  this.emit('change', this.count);
};

const counter = new Counter();
counter.on('change', count => {
  console.log('Count changed:', count);
});

counter.increment();

위 예제에서 Counter 객체는 EventEmitter를 상속하며, increment 메서드 내에서 change 이벤트를 호출합니다. 이벤트 핸들러는 change 이벤트가 발생할 때마다 현재 카운트 값을 출력합니다.

이제 프로토타입을 사용하여 커스텀 이벤트 핸들러를 개발하는 방법을 알아보았습니다. 프로토타입을 사용하면 재사용성과 확장성이 높은 이벤트 핸들러를 쉽게 개발할 수 있습니다.

더 자세한 내용은 MDN Web Docs에서 확인할 수 있습니다.

#태그1 #태그2