Javascript custom event 🐕

javascript에서는 미리 정의되어 있는 이벤트 종류외에 추가로 custom event를 추가할 수 있습니다.

 

반복되는 동작을 customEvent로 정의후에 

eventHandler를 등록한 dom 요소에서 dispatchEvent 메소드를 통해 customEvent를 동작하게 할 수 있습니다.

 

customEvent에는 type과 옵션이 들어갑니다.

옵션 객체를 통해 원하는 데이터를 전달할 수도 있습니다.

CustomEvent(type, [options]?)


options => { detail: {객체 정의}}

 

아래는 간단한 사용 예시 입니다.

const cat = new CustomEvent('animal', { detail: {name: 'cat' }})
const dog = new CustomEvent('animal', { detail: {name: 'dog'}})

const div = document.querySelctor('div');
div.addEventListener('animal', (e) => {e.detail.name})

div.dispatchEvent(cat) // cat
div.dispatchEvent(dog) // dog
div.dispatchEvent(new CustomEvent('animal', {detail: {name: 'elephant'}})) // elephant
div.dispatchEvent(new CustomEvent('animalTest', {detail: {name: 'elephant'}})) // 발동 x, animalTest를 div에 등록해두지 않았으므로

div.addEventListener('click', () => div.dispatchEvent(cat)) // 클릭하면 cat 출력

 

 

순서를 이해하는게 중요한것 같습니다.

1. 이벤트 발생을 원하는 객체에 customEventName을 addEventListener을 통해 등록합니다. 이때 콜백함수를 같이 등록합니다.

2. customEventName을 가진 customEvent를 변수에 담거나 직접 dispatchEvent를 호출합니다.

3. 변수에 담긴 customEvent가 실행되면 옵션의 detail 속성을 통해 원하는 정보를 전달할 수도 있습니다.

4. 옵션 없이 dispatchEvent(customEventName)을 호출하게 되면 미리 등록한 콜백 함수가 실행될 것입니다!

 

 

 

See the Pen Untitled by 정우병 (@woobottle) on CodePen.

 

 

 

 

출처 : https://developer.mozilla.org/ko/docs/Web/API/CustomEvent/CustomEvent

CustomEvent() - Web API | MDN