CustomEvent로 특정 이벤트 기능 분리

$inputTag.addEventListener('keyup', (event) => {
  (...)

  if(event.keyCode === 13) {
    items.push(value);
    $notification.classList.add('Notification--show');
    $notification.classList.remove('Notification--hide');
    $itemList.innerHTML = items.map(item => `<li>${item}</li>`).join('');
  }
  setTimeout(() => {
    $notification.classList.add('Notification--hide');
    $notification.classList.remove('Notification--show');
  }, 2000);
});

다음과 같이 특정 공지창이 애니메이션 되도록 코드를 작성하였다.

 

2초 뒤에는 화면 상에 드러난 공지창이 다시 사라지도록 setTimeout() 함수를 같은 이벤트 콜백 함수 내에 넣어 처리하였다.

하지만 이렇게 코드를 작성하고 보니 두 개의 동작은 하나의 사건에 의해 발생되기 때문에 하나의 기능으로 묶어주는 것이 코드 상

더 명확하고 이후에 해당 기능을 재활용할때 용이할 것 같았다.

 

Refactoring_CustomEvent

$inputTag.addEventListener('keyup', (event) => {
  (...)

  if(event.keyCode === 13) {
    items.push(value);
    document.dispatchEvent(new CustomEvent('animNoti')); //타겟팅
    $itemList.innerHTML = items.map(item => `<li>${item}</li>`).join('');
  }
});

Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().

---

document.addEventListener('animNoti', () => {
  $notification.classList.add('Notification--show');
  $notification.classList.remove('Notification--hide');

  setTimeout(() => {
    $notification.classList.add('Notification--hide');
    $notification.classList.remove('Notification--show');
  }, 2000);
})

위와 CustomEvent를 통해 'animNoti' 라는 새로운 이벤트 인스턴스를 생성해주고 해당 인스턴스를 trigger하여 애니메이션 처리 기능을

해당 콜백 함수 내에서 처리하도록 하였다.