[JS-중급편-이벤트] 7. 커스텀 이벤트

 

 

JavaScript가 모든 시나리오에 대해 기본적으로 제공하는 많은 이벤트에도 불구하고 우리 자신의 특정 요구에 맞게 자체 이벤트를 발생시키고 싶을 때가 있습니다.

 

우리가 그렇게 하기를 원하는 데에는 여러 가지 이유가 있습니다.

 

이벤트는 이벤트를 발생시키는 사물과 해당 이벤트를 수신하는 사물 (또는 사물) 사이에 좋은 수준의 분리를 제공합니다.

 

우리가 살고있는 이벤트 중심 세계에서 DOM 요소는 코드의 내부 작동에 대해 잘 알 필요가 없습니다.

 

이벤트에 의존함으로써 우리는 UI 나 코드에서 일을 깨뜨리지 않고 나중에 많은 정리를 하지 않고 일을 변경할 수 있는 상당한 유연성을 갖게됩니다.

 

이것이 내장 이벤트를 매우 유용하게 만드는 것입니다.

 

이것이 바로 우리가 만들고 실행하는 커스텀 이벤트를 유용하게 만드는 것입니다.

 

이러한 유용성을 활용하기 위해 JavaScript는 우리에게 필요한 것만 제공합니다. 

 

적절한 이름의 CustomEvent가 있으며 아래의 짧은 튜토리얼에서 자세히 살펴 보겠습니다.

 

 

 

CustomEvent 사용

 

이름에서 알 수 있듯이 CustomEvent 인터페이스는 자체 사용자 지정 이벤트를 만드는 데 사용할 것입니다.

 

 첫 번째는 CustomEvent 생성자를 호출하여 사용자 정의 이벤트를 만드는 것입니다.

 

let myEvent = new CustomEvent("myEventName");

 

CustomEvent 생성자는 몇 가지 인수를 사용하지만 반드시 필요한 유일한 인수는 이벤트 이름을 나타내는 인수입니다. 

 

위 코드의 경우 이벤트는 myEventName이라고 불릴 것입니다.

 

myEvent 변수에 연결된 모든 것을 래핑하는 CustomEvent 객체입니다.

 

이벤트가 생성되면 다음 단계는 실제로 이벤트를 발생시키는 것입니다. 

 

프로그래밍 방식으로 이벤트를 시작하는 방법은 dispatchEvent 메서드를 사용하는 것입니다.

 

let myEvent = new CustomEvent("myEventName");
document.body.dispatchEvent(myEvent);

 

이벤트 대상 (실제로 이벤트를 발생시키는 요소라고도 함) 역할을 하려는 요소에 대해 dispatchEvent를 호출합니다.

 

우리의 경우 그 요소는 body 입니다.

 

일단 이 시점에서 끝났습니다.

 

우리는 당신의 커스텀 이벤트와 그것을 실제로 트리거하는 코드를 가지고 있습니다.

 

원을 완전히 완성하는 데 필요한 것은 코드에서 이 이벤트를 수신하는 addEventListener입니다.

 

document.body.addEventListener("myEventName", doSomething, false);

 

이벤트를 실제로 전달하기 전에 addEventListener 코드가 실행되는지 확인하십시오. 

 

그렇지 않으면 이벤트 리스너가 준비되기 전에 이벤트가 실행될 것입니다.

 

 

 

 

 

간단한 예제

 

이전 섹션에서 사용자 지정 이벤트를 만들고 실행하는 데 필요한 사항을 확인했습니다. 

 

매우 간단한 예제에서 모든 것이 작동하는지 보려면 다음 스니펫을 확인하십시오.

 

document.body.addEventListener("myEventName", doSomething, false);

function doSomething(e) {
  console.log("Event is called: " + e.type);
}

var myEvent = new CustomEvent("myEventName");
document.body.dispatchEvent(myEvent);

 

이 코드를 실행하면 이벤트 핸들러 내부의 console.log문이 호출되는 것을 볼 수 있습니다.

 

myEventName이 실행되고 이벤트 리스너가 이에 반응했기 때문입니다.

 

이벤트 핸들러에 대해 말하자면 더 흥미로운 것이 있습니다.

 

function doSomething(e) {
    console.log("Event is called: " + e.type);
}

 

type 속성의 값에 대한 이벤트 인수를 폴링하고 있습니다. 

 

CustomEvent의 일부로 type 속성을 지정하지 않았음에도 불구하고 type 속성 (다른 이벤트 인수 관련 속성과 함께)을 이벤트 핸들러에서 사용할 수 있습니다. 

 

그 이유는 CustomEvent가 Event에서 상속되기 때문입니다. 

 

추가 작업이 없더라도 CustomEvent를 사용하면 모든 이벤트 관련 속성을 무료로 얻을 수 있습니다.

 

 

사용자 지정 이벤트 속성 지정

 

내장 된 이벤트 속성은 많은 유용한 정보를 제공하지만 사용자 지정 이벤트에 대한 자체 사용자 지정 이벤트 속성을 지정할 수도 있습니다! 

 

이를 위해서는 CustomEvent 생성자의 두 번째 인수를 사용하고 세부 속성 값을 전달해야합니다.

 

let myEvent = new CustomEvent("myEventName",
  {
    'detail': Math.round(Math.random() * 1000)
  });

 

이벤트 처리기에서 Event 개체와 관련된 다른 속성과 마찬가지로 이 세부 속성에 액세스 할 수 있습니다.

 

function doSomething(e) {
  console.log("Event detail is: " + e.detail);
}

 

주의해야 할 점은 detail 속성에 더 이상 속성을 추가하는 권장 방법이 없다는 것입니다. 

 

권장되지 않는 방법은 CustomEvent 객체를 확장하는 것이지만 더 많은 속성을 제공하는 훨씬 더 쉬운 해결 방법이 있습니다. 

 

추가 속성이있는 새 개체를 아래와 같이 detail 속성에 할당하기만 하면됩니다.

 

let myEvent = new CustomEvent("myEventName",
  {
    'detail': {
      first: "Chalupa",
      last: "Batman",
      random: Math.round(Math.random() * 1000)
    }
  });

그런 다음 대신 detail 속성에 점을 찍어 이러한 속성에 액세스 할 수 있습니다.

function doSomething(e) {
  console.log("Event detail is: " + e.detail.first);
}

이제 디테일 객체 자체에 의존하여 추가 속성을 쉽게 지정할 수 있으므로 내장 된 Event 또는 CustomEvent를 확장하는 것이 가려움을 느끼지 않아야합니다.

 

 

DOM 및 디스패치 이벤트

 

많은 언어에서 앱 내부의 다양한 내부 구성 요소 간의 변경 사항을 알리는 방법으로 이벤트를 사용하는 것이 일반적입니다. 

 

이러한 구성 요소에는 UI가 없거나 이와 관련된 직접적인 사용자 상호 작용이 있을 수 있습니다.

 

HTML 세계에서는 상황이 조금 다릅니다.

 

기본적으로 DOM 요소에서만 이벤트를 전달할 수 있습니다.

 

작업중인 임의의 객체에서 이벤트를 전달할 수 없습니다.

 

여기서 언급 한 핵심은 "즉시 사용 가능한"단어입니다.

 

이 StackOverflow 질문은 범용 이벤트 전달을 수동으로 추가하는 방법을 설명합니다.

 

일부 타사 라이브러리도 도움이 될 수 있으므로 필요한 경우 최신 라이브러리를 검색하는 것이 좋습니다.