[JavaScript] Event 인터페이스

Event를 상속받은 인터페이스(ex, MouseEvent는 UIEvent를 상속받았고 UIEvent는 Event를 상속받음)는 종류가 다양하니 링크 참조  

 

 

1) Event 인터페이스

이벤트는 마우스를 클릭하거나 키보드를 누르는 것과 같이 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API들이 생성할 수도 있음(프로그래밍으로 발생)

new Event(type, options);

• type: 이벤트의 이름을 나타내는 문자열
• options: 이벤트 속성을 나태내는 객체, bubbles, canclenable, composed를 포함하고 있음

인스턴스 변수

-bubbles: 이벤트 버블링 여부

-canclenable: 이벤트 취소 가능 여부

-composed: 이벤트가 shadow root 바깥의 이벤트 수신기로도 전달될지 여부

-target: 이벤트가 발생한 element를 식별하는 읽기 전용 속성

-currentTarget: 이벤트 핸들러가 연결된 element를 식별하는 읽기 전용 속성

-isTrusted: 사용자에 의해 발생한 이벤트면 true, 스크립트에 의해 생성되거나 수정되었다면 flase인 읽기 전용 속성

 

const evt = new Event("eventName", { bubbles: true, cancelable: false, composed: true });
document.dispatchEvent(evt);

 

 

2) CustomEvent 인터페이스

Event 인터페이스를 상속받은 인터페이스, Event 인터페이스의 인스턴스 속성에 detail이라는 읽기 전용 속성 추가이벤트를 초기화할 때 detail에 값을 넣어서 전달해줄 수 있음

const evt = new CustomEvent("greeting", {
	detail: {
    	message: "hello" 
    } }
);

el.addEventListener("greeting", (event) => {
	console.log('greeting message: '+event.detail.message) } );
//greeting message: hello