custom event에 대해 알아보자

Sming·2022년 5월 19일

custom event

MVC패턴을 이용하던 도중 controller의 역할과 view의 역할을 확실하게 분리하기 위해서 custom Event를 사용하였다. 그렇다면 custom event는 어떻게 사용할까?

// CustomEvent 생성
const catFound = new CustomEvent('animalfound', {
  detail: {
    name: 'cat'
  }
});
const dogFound = new CustomEvent('animalfound', {
  detail: {
    name: 'dog'
  }
});

// 적합한 이벤트 수신기 부착
obj.addEventListener('animalfound', (e) => console.log(e.detail.name));

// 이벤트 발송
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// 콘솔에 "cat"과 "dog"가 기록됨

다음은 mdn의 custom event에 대한 설명이다.

custom event 생성

먼저 위의 문법처럼

new CustomEvent('커스텀 이벤트 이름', '이벤트 내에 넣을 정보');

이런식으로 작성을 하면 커스텀 이벤트가 생성된다.

customEvent 수신

이 부분은 자바스크립트에서의 돔에 이벤트를 등록할때와 동일하다.

obj.addEventListener('커스텀 이벤트 이름', (e) => console.log(e.'이벤트 정보'));

customEvent 발생시키기

이 부분은 실제 브라우저에서 click, keydown처럼 상호작용을 했을때 이벤트를 발생시키는것을 customEvent내에서는 dispatchEvent를 이용해서 보내준다.

obj.dispatchEvent('커스텀 이벤트');

주로 어떻게 사용할까?

// 이벤트 유틸

export const { on, emit } = {
  on(element, eventName, handler) { // 이벤트 수신
    element.addEventListener(eventName, handler);
  },
  emit(element, eventName, data = {}) { // 생성과 동시에 발생시키기
    const customEvent = new CustomEvent(eventName, {
      detail: data,
    });
    element.dispatchEvent(customEvent);
  },
};

// test.view.js

emit($test, '@submit', { input: this.$test.value });

// test.controller.js

on(this.$test, '@submit', (e) => this.requestKeywordChange(e.detail.input));

requestKeywordChange(data) {
  try {
    this.scrollHandler.setError(false);
    this.#keyword = searchMachine.changeKeyword(data);
    this.#pageToken = '';
    this.searchResultView.reset();
    this.searchVideo();
  } catch (err) {
    alert(err.message);
  }
}

mvc에서 이벤트핸들러를 거는것은 view의 역할, 그 콜백함수는 controller의 역할이 맞다고 생각한다. 하지만 일반적으로 사용하려면 이벤트핸들러와 콜백은 같은 파일내에 있을수 밖에 없다. 그래서 customEvent를 통해서 분리되어있는 두개를 연결해주는것이다.

controller에서 @submit이벤트가 들어오면 requestKeywordChange를 실행하게 한다.

view에서는 @submit이란 이벤트를 던지고 controller가 이것을 캐치해낸다.

실제 미션에서 나만의 패턴을 구현해보며 사용했던 customEvent 방식이다.