프로그래머스 데브코스 TIL Day 16

Day 16 - 2022/11/07

💡 새롭게 알게된 점

Javascript에서 커스텀 이벤트 만들기

Event

아래와 같은 코드로 Event 객체를 생성할 수 있다.

const event = new Event(type[, options]);

type은 이벤트 타입을 나타내고, ‘click’과 같은 내장 이벤트나 ‘custom-event’ 같은 커스텀 이벤트를 사용할 수 있다.

options는 두 개의 선택 프로퍼티가 있는 객체가 온다. 기본 값은 false

bubbles: boolean → true인 경우 이벤트가 버블링 된다.

cancelable: boolean → true인 경우 브라우저 ‘기본 동작’이 실행되지 않는다.

dispatchEvent

이벤트 객체를 생성한 후 element.dispatchEvent(event)를 통해 요소에 있는 이벤트를 실행시켜줘야 핸들러가 일반 브라우저 이벤트처럼 이벤트에 반응할 수 있다.

아래와 같은 코드로 이벤트를 실행시킬 수 있다.

// index.html
<button id='event-button' onClick='alert('클릭 이벤트');'>버튼</button>

// index.js
const buttonElement = document.querySelector('#event-button');
const event = new Event('click');

buttonElement.dispatchEvent(event);

위와 같은 코드를 작성하면 버튼을 클릭하지 않고도 이벤트 핸들러가 동작한다.

new Event() 인자에 명시적으로 bubble를 true로 설정하면, 이벤트를 버블링 할 수 있다.

커스텀 이벤트

new Event로 커스텀 이벤트를 만들 수 있지만, new CustomEvent를 통해 더 제대로 된 커스텀 이벤트를 만들 수 있다.

Event와의 차이점은, CustomEvent의 두 번째 인자(객체)에 detail 프로퍼티를 추가해 커스텀 이벤트 관련 정보를 명시하고, 정보를 이벤트에 전달할 수 있다.

// index.html
<h1 id='custom-event'>커스텀 이벤트</h1>

// index.js
const h1Element = document.querySelector('#custom-event');

h1Element.addEventListener('hello', function(e) {
    alert(e.detail);
});

h1Element.dispatchEvent(new CustomEvent('hello', {
	  detail: 'I am custom event',
}));

detail 프로퍼티에는 어떤 타입의 데이터도 들어갈 수 있다.

new Event로 만든 일반적인 이벤트에서도 추가 정보가 담긴 프로퍼티를 이벤트 객체에 추가해주면 되지 않나요?

detail 이라는 특별한 프로퍼티를 사용하면 다른 이벤트 프로퍼티와의 충돌을 피할 수 있다.

또한 new CustomEvent를 사용하면 누가 읽어도 ‘커스텀 이벤트’라고 인지할 수 있기 때문이다.

---

❗️ 느낀점

이벤트를 직접 만드는 커스텀 이벤트 방식은 난생 처음보는 것 같다.

여태까지 onClick 같은 이벤트를 구현할 때 depth가 길어져도 그냥 사용하는 경우가 있었는데, 앞으로는 디에서 쓰일지 모르는 이벤트 같은 경우 이 커스텀 이벤트를 활용하여 코드를 효율적으로 짜야겠다.

오늘도 고생했다👊