JavaScript: CustomEvent 및 dispatchEvent 이해

Event이 기사에서는 , CustomEvent생성자 및 dispatchEvent()메소드 를 사용하여 이벤트를 생성하고 발송하는 방법을 설명하려고 합니다 . 또한 사용자 정의 이벤트와 dispatchEvent가 프로젝트에서 사용되는 방법과 용도에 대해서도 알아봅니다.

이 기사가 끝날 때까지 사용자 지정 이벤트를 만들 수 있기를 바랍니다.

시작하겠습니다!

웹 애플리케이션은 일련의 이벤트로 구성되며 이러한 이벤트는 웹 애플리케이션의 가장 중요한 부분 중 하나라고 말할 수 있습니다.

경우에 따라 기본 JavaScript 이벤트가 요구 사항을 충족하지 않습니다. 예를 들어, 우리 애플리케이션에서는 기본 JavaScript 이벤트에서 사용할 수 없는 일부 사용자 지정 이벤트를 사용하여 알림을 추가하고 일부 데이터를 새로 고치는 등의 작업을 수행하고 있습니다. 나머지 기사에서 이에 대해 살펴보겠습니다.

맞춤 이벤트는 어떻게 만들 수 있나요?

사용자 지정 이벤트를 만드는 방법에는 두 가지가 있습니다.

• 첫 번째 방법은 이벤트 생성자를 사용하는 것입니다.
• 두 번째 방법은 우리가 선호하는 CustomEvent 생성자를 사용하는 것입니다.

이벤트 생성자

다음과 같이 Event 생성자를 사용하여 사용자 지정 이벤트를 만들 수 있습니다.

이벤트 이름은 대소문자를 구분하지 않습니다. 그래서 NOTIFICATION_ADD 는 또는 와 같습니다 .Notification_Add notification_add

const event = new Event('NOTIFICATION_ADD');

위에서 언급했듯이 이벤트 객체에 더 많은 데이터를 추가하려면 다음과 같이 CustomEvent 생성자를 사용할 수 있습니다.

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

자, 이벤트가 생성되었습니다. 무엇 향후 계획? 물론 우리는 그것을 우리 프로젝트에서 사용하고 싶습니다. 이벤트 발생의 마지막 단계는 dispatchEvent() 메서드를 호출하는 것입니다. 내부에 Event 객체가 있는 이벤트 매개변수를 허용 합니다.

예를 보여 드리겠습니다.

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

어떤 목적으로 어디에 사용합니까?

읽기 전에 마이크로 프론트엔드에 대한 기사를 찾아보는 것이 좋습니다.

CicekSepeti에는 여기에 마이크로 프런트엔드 아키텍처가 있고 버튼, 도구 설명, 알림, 확인란 등과 같은 사용자 지정 구성 요소와 여러 조각이 있습니다. 때로는 이러한 구성 요소와 프래그먼트 간에 통신이 필요합니다. 이 시점에서 맞춤 이벤트가 도움이 됩니다.

예를 들면 원격에 알림 구성 요소가 있고 일부 트랜잭션 후에 페이지 중 하나에 표시하려고 합니다.

이 경우 알림 구성 요소에는 'NOTIFICATION_ADD'라는 이벤트 리스너가 있고 페이지에는 등록 양식이 있습니다. 사용자가 등록 버튼을 누르면 API 요청을 한 다음 dispatchEvent 메서드와 사용자 지정 이벤트 생성자를 통해 성공 또는 오류 토스트 메시지를 표시합니다.

알림 구성 요소의 이벤트 리스너 덕분에 이전에 다른 프로젝트에서 정의한 사용자 지정 이벤트를 원할 때 언제 어디서나 트리거할 수 있습니다.

요약

JavaScript 사용자 정의 이벤트를 사용하면 적절하게 사용할 때 앱의 사용자 및 개발 경험을 모두 향상시킬 수 있습니다 . 이제부터는 키보드 이벤트, 마우스 이벤트 등과 같은 JavaScript의 기본 이벤트가 우리의 요구 사항을 충족하지 않을 때 사용자 지정 이벤트를 사용할 수 있음을 알고 있습니다.

참조