[240605] 40장 이벤트 (4)

이벤트 핸들러 내부의 this

1. 이벤트 핸들러 어트리뷰트 방식

• 전역객체 window 가리킴 (함수와 동일)
• 단, 이벤트 핸들러를 호출할 때 인수로 전달한 this 는 이벤트를 바인딩한 DOM 요소 가리킴

2. 이벤트 프로퍼티 방식과 addEventListener 방식

• this 는 이벤트를 바인딩한 DOM 요소 가리킴
• 즉 currentTarget 프로퍼티와 this 와 같음
• 화살표 함수로 정의한 이벤트 핸들러 내부의 this 는 상위 스코프의 this 를 가리킴 → 화살표 함수는 자체 this 갖지 않음

→ 화살표 함수로 등록하면 this 가 인스턴스를 가리키도록 할 수도 있음

이벤트 핸들러에 인수 전달

• 이벤트 핸들러 내부에서 함수를 호출하면서 인수 전달 가능
• 이벤트 핸들러를 반환하는 함수를 호출하면서 인수 전달 가능

커스텀 이벤트

1. 커스텀 이벤트 생성

• 개발자의 의도로 생성된 이벤트를 커스텀 이벤트라 한다.
• 이벤트 생성자 함수는 첫 번째 인수로 이벤트 타입을 나타내는 문자열을 전달 받는다.
• 일반적으로 CustomEvent 이벤트 생성자 함수를 사용

const customEvent = new CustomEvent('foo');
console.log(customEvent.type); // foo 
console.log(customEvent.bubbles); // false 기본 설정 
console.log(customEvent.cancelable); // fasle 기본 설정

// MouseEvent 생성자 함수로 click 이벤트 타입의 커스텀 이벤트 객체를 생성
const mouseEvent = new CustomEvent('click', {
	bubbles: true,
	cancelable: true,
	clientX: 50,
	clientY: 100
});

console.log(mouseEvent.clientX); // 50
console.log(mouseEvent.clientY); // 100

• 이벤트 생성자 함수로 생성한 커스텀 이벤트는 isTrusted 프로퍼티 값이 언제나 false 다.

2. 커스텀 이벤트 디스패치

• 생성된 커스텀 이벤트는 dispatchEvent 메서드로 디스패치(이벤트 발생시키는 행위)할 수 있다.
• dispatchEvent 메서드에 이벤트 객체를 인스로 전달하면서 호출하면 전달한 이벤트 타입의 이벤트가 발생한다.

const mouseEvent = new MouseEvent('click');
// 커스텀 이벤트 디스패치(동기처리) click 이벤트가 발생
$button.dispatchEvent(mouseEvent); 

• 일반적으로 이벤트 핸들러는 비동기 처리 방식으로 동작하지만 dispatchEvent 메서드는 이벤트 핸들러 동기처리 방식으로 호출한다.

→ 이벤트 핸들러를 직접 호출하는 것과 같음

$button.addEventListener('foo', e=> {
	alert(e.detail.message);
}

const customEvent = new CustomEvent('foo', {
	detail: { message: 'Hello' } // 이벤트와 함께 전달하고 싶은 정보
}); 

$button.dispatchEvent(customEvent);

• 기존 이벤트 타입이 아닌, 임의의 이벤트 타입을 지정하여 커스텀 이벤트 객체를 생성한 경우 반드시 addEventListener 메서드 방식으로 이벤트 핸들러를 등록해야함