CustomEvent 사용 예제

CustomEvent 사용 예제

 

CustomEvent() API를 언제 사용하는지 곰곰이 생각한 것을 여기에 정리해 본다.

뭔가 이벤트가 생겼을 때 해야 할 일을

누가 언제 처리하는 것이 효과적인가에 따라

CustomEvent()를 사용하게 된 거 같다.

 

사례 1

door의 역할(열고 닫기)을 하는 버튼을 클릭할 때,

door 버튼은 문을 열고 닫는 주요 기능뿐만 아니라, 이러저러한 일을 해야 한다.

btn_door.addEventListener('click',function(){ 
	doOpenHide();
	dosomething1(); dosomething2(); dosomething3();
    ...
});

door 버튼을 클릭할 때, door 버튼은 주요 역할(열고 닫기)만 수행하고,

'door 가 열거나 닫혔다'라고 외쳐주면,

나머지 해야 할 일은 그 일을 맡은 객체가 door버튼이 클릭된 것을 알아채고 하는 것이 더 효율 적일 때가 있다.

btn_door.addEventListener('click',function(){ 
	doOpenHide(); 
	element.dispatchEvent('doorclick');
});

element.addEventListener('doorclick',function(e){
	if(e.detail.name === 'open'){
    	dosomething1();
    }else if(e.detail.name === 'hide'){
	dosomething2();
    }else{
    	dosomething3();
    }
});

사례 2

1. 사람이 조명을 켠다 : 집에 들어갈 때 사람이 조명을 켠다

2. 조명이 알아서 켠다 : 조명이 알아서 사람이 집에 들어온 것을 깨닫고 조명을 켠다.

2번의 경우, 조명은 집에 사람이 들어왔나 여부만 캐치해서 조명을 켜고 끄는 일만 하면 되고,

사람은 집에 들어왔을 때 해야 되는 일 중 조명 켜는 일은 덜게 된다.(짐을 덜어낸다) 

 

사용법

CustomEvent 생성

const catFound = new CustomEvent('animalfound', {
  detail: {
    name: 'cat'
  }
});

적합한 이벤트 수신기 부착

obj.addEventListener('animalfound', (e) => console.log(e.detail.name));

이벤트 발송

obj.dispatchEvent(catFound);

 

예제