커스텀이벤트

박찬욱·2023년 9월 15일

Basic JavaScript

목록 보기

12/13

커스텀 이벤트란?

이벤트 객체는 크게 두 종류로 나눌 수 있다.

이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체
이벤트 생성자 함수를 호출하여 명시적으로 생성한 이벤트 객체 (의도적)

전자의 경우에는 발생하는 이벤트의 종류에 따라 이벤트 타입이 결정된다.

const $button = document.querySelector('.btn');
$button.addEventListener('click', (e) => {
  console.log(e.type); // 해당 이벤트 타입은 'click'이다.
});

하지만 경우에 따라 JS에서 제공하는 기본 이벤트가 개발 요구 사항을 충족시키지 못할 때 개발자 스스로 커스텀 이벤트를 만들 수 있다.

방법

커스텀 이벤트는 이벤트 타입을 기존 이벤트 타입을 사용할 수 있다.
만일 기존 이벤트 타입이 아닌 임의의 문자열로 새로운 이벤트 타입을 지정하는 경우에는 CustomEvent 생성자 함수를 사용한다.

const keyboardEvent = new KeyboardEvent('keyup');
const customEvent = new CustomEvent('foo');

주의사항

일반적으로 생성된 커스텀 이벤트는 버블링과 preventDefault가 되지 않는다. 그렇기 때문에 이를 설정시켜주려면 다음과 같이 적어야한다.

또한 MouseEvent로 생성한 커스텀 이벤트인 경우에는 MouseEvent객체가 가지고 있는 고유의 프로퍼티 값을 두 번째 인수로 넘겨줄 수 있다.
각각의 이벤트 객체들은 고유의 프로퍼티를 가지며 서로 프로토타입 체인으로 연결되어있다.

const customEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true
  clientX: 50,
  clientY: 100
});

커스텀 이벤트 디스패치

dispatchEvent메서드로 이벤트를 발생시키는 행위를 할 수 있다.

dispatchEvent메서드 인수로 내가 만든 커스텀 이벤트 객체를 전달하고 디스패치를 호출하면 해당 이벤트 타입의 이벤트가 발생한다.

단 dispatchEvent메서드는 이벤트 핸들러를 동기처리방식으로 호출하기 때문에 dispatchEvent를 호출하기 전에 해당 이벤트 타입의 이벤트 핸들러를 미리 등록해야한다. 디스패치를 호출하면 내가 만든 커스텀 이벤트를 발생시킬텐데 핸들러가 등록되어있지않으면 어떠한 처리도 하지 않을 것이기 때문이다.

// html 생략
const button = document.querySelector('.btn');
button.addEventListener('foo', e => {
  alert(e.detail.message);
});

const customEvent = new CustomEvent('foo', {
  detail: { message: 'Hello'}
});

button.dispatchEvent(customEvent);

CustomEvent 생성자 함수에는 이벤트와 함께 전달하고 싶은 요소를 detail에 담아 전달할 수 있다.

이때 주의할 점은 기존 이벤트 타입이 아닌 임의의 이벤트 타입을 지정하고 CustomEvent를 통해 이벤트 객체를 생성했다면 반드시 이벤트 핸들러는 addEventListener 방식으로 등록해야한다.

활용

  setEvent() {
    const removeAll = new CustomEvent('removeAll');
    this.target.addEventListener('click', (e) => {
      if (e.target.classList.contains('allDeleteTodoList')) {
        this.target.dispatchEvent(removeAll);
      }
    });
    this.target.addEventListener('removeAll', () => {
      this.setState([]);
    });
  }