[javascript] Custom event

• Custom event란
  • js의 내장 이벤트(click, change...)가 아닌 사용자가 생성한 이벤트
  • Event / CustomEvent 생성자를 사용해 생성
  •  

const selectEvent = new CustomEvent('select', { 
  bubbles: true, 
  detail: '메뉴 클릭이당' 
});

const itemList = document.querySelectorAll('.item');
for (const item of itemList) {
  item.addEventListener('click', () => item.dispatchEvent(selectEvent))
}

document.addEventListener("select", (e) => alert(e.detail));

//각 아이템들에 click을 했을시 커스텀 이벤트인 select 가 발동하도록 등록했으니 (꼭 dispatchEvent로 등록할 것)
// 코드 마지막 줄 select 이벤트를 감지할 수 있는 것

 

• 이벤트 생성

new Event(type, option);

new CustomEvent(type, option);


// type: 커스텀 이벤트 이름
// option 
// -new Event Options : bubbles, cancelable, composed
// -new CustomEvent Options: detail, bubbles, cancelable, composed

 

출처: https://mong-blog.tistory.com 

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

CustomEvent() - Web API | MDN

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