[JS] 커스텀 이벤트를 만드는 2가지 방법(Event, CustomEvent)

🤜 이번 시간에는 JS에서 커스텀 이벤트를 만드는 방법에 대해 알아보았다!

1. Custom event란?

• 커스텀 이벤트는 말 그대로, JS의 내장 이벤트(click, scroll 등)가 아닌 사용자가 생성한 이벤트를 말한다.
• Event 혹은 CustomEvent 생성자를 사용해 커스텀 이벤트를 만들 수 있다.
• 커스텀 이벤트는 용도에 따라 특정 인수를 보낼 수 있는 장점이 있다.
• 한 예로, 리스트에서 메뉴 클릭시 select 이벤트를 발생시키고, 이 이벤트가 발생할 때 상위요소에서 어떤 처리를 할 수 있다.

See the Pen new Event example by KumJungMin (@kumjungmin) on CodePen.

2. Custom event 생성하는 방법

1) new Event 방법

(1) event 객체 만들기

커스텀 이벤트를 만들기 앞서, Event 생성자를 사용해 이벤트 객체를 만들어야 한다.
Event 생성자에는 총 2가지 인수를 설정할 수 있다.

new Event(type, option);

• type: 커스텀 이벤트 이름을 설정한다.
• option: bubbles, cancelable 등을 설정할 수 있다.

option 설정	설명
bubbles	: 기본값은 false이다.  : true로 설정시 이벤트가 버블링된다.  : 만약 상위 요소에서 커스텀 이벤트를 감지하고자 한다면 true로 설정하자.
cancelable	: 기본값은 false이다.  : true로 설정시 e.preventDefault()로 이벤트를 취소할 수 있다.
composed	: 기본값은 false이다.  : 이벤트를 shadow DOM레벨을 넘어, 표준 DOM으로 전파할 지 여부를 설정한다.  : 만약 composed를 true로 설정할 경우, shadow DOM에서 발생한 이벤트를   DOM 상위 요소에서 수신할 수 있다.  : 단, bubbles: true로 설정해야한다.

• 아래 예시는 login 커스텀 이벤트 객체를 만든 모습이다.
• bubbles를 true로 설정했기에, 상위 요소에서 login 이벤트를 추적할 수 있다.

const customEvt = new Event('login', { bubbles: true });

(2) dispatchEvent()로 이벤트 등록하기

• 생성한 커스텀 이벤트 객체는 꼭! dispatchEvent를 호출해야한다!
• el.dispatchEvent(event)를 호출해야, 커스텀 이벤트가 발생시 핸들러를 실행할 수 있다.

const customEvt = new Event(type, option);

el.dispatchEvent(customEvt); 

• 커스텀 이벤트(login)는 dispatchEvent로 호출해야, 이벤트 발생시 핸들러 실행이 가능하다.

const customEvt = new Event('login', { bubbles: true });

el.dispatchEvent(customEvt);  // this!
document.addEventListener('login', () => alert('login 이벤트 발생!'));

(3) event.isTrusted, 커스텀 이벤트 여부 확인하기

• isTrusted는 이벤트가 사용자 액션에 의해 발생한 이벤트인지 구분할 수 있다.
• 만약 사용자 액션에 의해 발생한 이벤트라면 isTrusted는 true가 된다.
• 스크립트에서 생성/수정했거나 dispatchEvent()로 발송한 이벤트(커스텀 이벤트)는 false가 된다.

😎 아래 예시의 두 버튼을 클릭해보자!
내장 이벤트 테스트 버튼은 isTrusted가 true이지만, 커스텀 이벤트 테스트은 false가 출력된다.

See the Pen isTrusted example by KumJungMin (@kumjungmin) on CodePen.

2) new CustomEvent 방법

(1) CustomEvent 객체 만들기

new CustomEvent(type, option);

• type: 커스텀 이벤트 이름을 설정한다.
• option: detail, bubbles, cancelable 등을 설정할 수 있다.

option 설정	설명
detail	: 이벤트 발생시 넘기고 싶은 정보를 담을 수 있다.
bubbles	: 기본값은 false이다.  : true로 설정시 이벤트가 버블링된다.  : 만약 상위 요소에서 커스텀 이벤트를 감지하고자 한다면 true로 설정하자.
cancelable	: 기본값은 false이다.  : true로 설정시 e.preventDefault()로 이벤트를 취소할 수 있다.
composed	: 기본값은 false이다.  : 이벤트를 shadow DOM레벨을 넘어, 표준 DOM으로 전파할 지 여부를 설정한다.  : 만약 composed를 true로 설정할 경우, shadow DOM에서 발생한 이벤트를   DOM 상위 요소에서 수신할 수 있다.  : 단, bubbles: true로 설정해야한다.

• 아래 예시는 login 커스텀 이벤트 객체를 만든 모습이다.

const customEvt = new CustomEvent('login', { detail: { name: 'hello', age: 12 } });

(2) dispatchEvent()로 이벤트 등록하기

• CustomEvent로 생성한 커스텀 이벤트 객체도 dispatchEvent를 호출하자!

const customEvt = new CustomEvent(type, option);

el.dispatchEvent(customEvt); 

(3) detail, 이벤트에 특정 값 넘기기

• CustomEvent는 new Event와 달리, 인수로 detail을 설정할 수 있다!
• detail를 사용하면, 커스텀 이벤트에 원하는 값을 넘길 수 있다.

const customEvt = new Event(type, { detail: "이벤트 발생시 넘기고 싶은 값!" });

😎 이렇게 설정한 detail은 이벤트 핸들러에서 접근할 수 있는데, 아래 예시의 버튼을 클릭해서
알림창에서 detail을 확인해보자

// 커스텀 이벤트(custom-click) 정의
const customEvent = new CustomEvent('custom-click', { 
    bubbles: true,
    detail: '버튼 클릭이당'
});

// button 클릭시, 커스텀 이벤트 실행시키기
const button = document.querySelector('button');
button.addEventListener('click', () => button.dispatchEvent(customEvent));

// custom-click 발생시 실행시킬 동작(detail 접근 가능)
document.addEventListener("custom-click", (e) => alert(e.detail));

See the Pen custom-event-example-1 by KumJungMin (@kumjungmin) on CodePen.

🎈 이번 시간에는 커스텀 이벤트를 만드는 2가지 방법, Event, CustomEvent에 대해 알아보았다!
만약 JS 내장 이벤트가 아닌, 별도 이벤트가 필요하다면 이 방법을 써보는 건 어떨까?
(단, new Event는 detail을 인수로 설정할 수 없으므로 주의!)

추가적으로 더 알아보고 싶다면 아래 링크를 참고해보자!
- https://vhudyma-blog.eu/custom-events-in-javascript/
- https://developer.mozilla.org/ko/docs/Web/API/Event/Event
- https://ko.javascript.info/dispatch-events