이벤트 핸들러 프로퍼티 방식과addEventListener 메서드 방식 모두 이벤트 핸들러 내부의this는 이벤트를 바인딩한 DOM 요소를 가리킨다.
즉, 이벤트 핸들러 내부의this는 이벤트 객체의currentTarget프로퍼티와 같다.
화살표 함수로 정의한 이벤트 핸들러 내부의this는 상위 스코프의this를 가리킨다.
화살표 함수는 함수 자체의this바인딩을 갖지 않는다.
40.10 이벤트 핸들러에 인수 전달
이벤트 핸들러 어트리뷰트 방식은 함수 호출문을 사용할 수 있기 때문에 인수를 전달할 수 있다.
이벤트 핸들러 프로퍼티 방식과addEventListener메서드 방식의 경우 이벤트 핸들러를 브라우저가 호출하기 때문에 함수 호출문이 아닌 함수 자체를 등록하기 때문에 인수를 전달할 수 없다.
그러나 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달할 수 있다.
<!DOCTYPE html>
<html>
<head>
<body>
<lable>User Name <input type="text"/></lable>
<em class="message"></em>
<script>
const MIN_USER_NAME_LENGTH = 5;
const $input = document.querySelector('input[type=text]');
const $msg = document.querySelector('.message');
const checkUserNameLength = min => {
$msg.textContent = $input.value.length < min ? `이름은 ${min}자 이상으로 입력해 주세요` : '';
}
// 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달한다.
$input.onblur = () => {
checkUserNameLength(MIN_USER_NAME_LENGTH);
}
</script>
</body>
</html>
40.11 커스텀 이벤트
40.11.1 커스텀 이벤트 생성
개발자의 의도로 생성된 이벤트를커스텀 이벤트라 한다.
이벤트 생성자 함수는 첫 번째 인수로 이벤트 타입을 나타내는 문자열을 전달받는다.
이때 이벤트 타입을 나타내는 문자열은 기존 이벤트 타입을 사용할 수도 있고, 임의의 문자열을 사용하여 새로운 이벤트 타입을 지정할 수도 있다.
이 경우 일반적으로CustomEvent이벤트 생성자 함수를 사용한다.
// KeyboardEvent 생성자 함수로 keyup 이벤트 타입의 커스텀 이벤트 객체를 생성
const keyboardEvent = new KeyboardEvent('keyup');
console.log(keyboardEvent.type); // keyup
// CustomEvent 생성자 함수로 foo 이벤트 타입의 커스텀 이벤트 객체를 생성
const customEvent = new CustomEvent('foo');
console.log(customEvent.type); // foo
40.11.2 커스텀 이벤트 디스패치
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<title>Practice</title>
</head>
<body>
<button class="btn">Click me</button>
<script>
const $button = document.querySelector('.btn');
$button.addEventListener('click', e => {
console.log(e) // MouseEvent {...}
alert(`${e} clicked!`);
});
// 커스텀 이벤트 생성
const customEvent = new MouseEvent('click');
// 커스텀 이벤트 디스패치(동기 처리). click 이벤트가 발생한다.
$button.dispatchEvent(customEvent);
</script>
</body>
</html>
생성된 커스텀 이벤트는dispatchEvent메서드로 디스패치(이벤트를 발생시키는 행위)할 수 있다.
dispatchEvent메서드에 이벤트 객체를 인수로 전달하면서 호출하면 인수로 전달한 이벤트 타입의 이벤트가 발생한다.
기존 타입이 아닌 임의의 이벤트 타입을 지정하여 커스텀 이벤트 객체를 생성한 경우 반드시addEventListener메서드 방식으로 이벤트 핸들러를 등록해야 한다.
이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록할 수 없는 이유는on + 이벤트타입으로 이루어진 이벤트 핸들러 어트리뷰트/프로퍼티가 요소 노드에 존재하지 않기 때문이다.
ex. 'foo' 라는 임의의 이벤트 타입으로 커스텀 이벤트를 생성할 경우 'onfoo'라는 핸들러 어트리뷰트/프로퍼티가 요소 노드에 존재하지 않는다.
