40장 이벤트

40.1 이벤트 드리븐 프로그래밍

• 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킨다.
• 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다.
• 이벤트가 발생했을 때 호출될 함수를 이벤트 헨들러
• 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 헨들러 등록
• 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식으로 이벤트 드리븐 프로그래밍이라 한다.

40.2 이벤트 타입

• 이벤트 타입 : 이벤트의 종류를 나타내는 문자열

40.2.1 마우스 이벤트

• click : 마우스 버튼을 클릭했을 때
• dblclick : 마우스 버튼을 더블 클릭했을 때
• mousedown : 마우스 버튼을 눌렀을 때
• mouseup : 누르고 있던 마우스 버튼을 놓았을 때
• mousemove : 마우스 커서를 움직였을 때
• mouseenter : 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링x)
• mouseover : 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링o)
• mouseleave : 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링x)
• mouseout : 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링o)

40.2.2 키보드 이벤트

• keydown : 모든 키를 눌렀을 때 발생
• keypress : 문자 키를 눌렀을 때 연속적으로 발생
• keyup : 누르코 있던 키를 놓았을 때 한 번만 발생

40.2.3 포커스 이벤트

• focus : HTML 요소가 포커스를 받았을 때(버블링x)
• blur : HTML 요소가 포커스를 잃었을 때(버블링x)
• focusin : HTML 요소가 포커스를 받았을 때(버블링o)
• focusout : HTML 요소가 포커스를 잃었을 때(버블링o)

40.2.4 폼 이벤트

• submit : form 요소 내의 submit 버튼을 클릭했을 때
• reset : form 요소 내의 reset 버튼을 클릭했을 때(최근에 사용x)

40.2.5 값 변경 이벤트

• input : input(text, checkbox, radio), select, textarea 요소의 값이 입력되었을 때
• change : input(text, checkbox, radio), select, textarea 요소의 값이 변경되었을 때
• readystatechange : HTML 문서의 로드와 파싱 상태를 나타내는 readyState 프로퍼티 값(loading, interactive, complete)이 변경될 때 (DOMContentLoaded 보다 먼저 실행)

40.2.6 DOM 뮤테이션 이벤트

• DOMContentLoaded : HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료되었을 때

40.2.7 뷰 이벤트

• resize : 브라우저 윈도우의 크기를 리사이즈할 때 연속적으로 ㅂ라생
• scroll : 웹페이지 또는 HTML 요소를 스크롤할 때 연속적으로 발생

40.2.8 리소스 이벤트

• load : DOMContentLoaded 이벤트가 발생한 이후, 모든 리소스(이미지, 폰트 등)의 로딩이 완료되었을 때
• unload : 리소스가 언로드될 때(주로 새로운 웹페이지를 요청한 경우)
• abort : 리소스 로딩이 중단되었을 때
• error : 리소스 로딩이 실패했을 때

40.3 이벤트 핸들러 등록

• 이벤트 핸들러 : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수

40.3.1 이벤트 핸들러 어트리뷰트 방식

• 이벤트 핸들러 어트리뷰트의 이름은 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.
• 이벤트 핸들러 어브리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록된다.
• 주의할 점은 이벤트 핸들러 어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문으로 할당한다는 것이다.
• 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.

<button type="button" onClidk="sayHi('Lee')">Click me!</button>
<script>
function sayHi(name) {
    console.log(`Hi! ${name}.`);
}

// onclick 함수는 암묵적으로 아래의 코드처럼 생성이 됨.
function onclick(name) {
    sayHi(name);
}
</script>

40.3.2 이벤트 핸들러 프로퍼티 방식

• window 객체와 Document, HTMLElment 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다.
• 이벤트 핸들러 프로퍼티의 키는 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.
• 이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.
• 이벤트 핸들러를 등록하기 위해서는 이벤트를 발생시킬 객체인 이벤트 타깃과 이벤트의 종류를 나타내는 문자열인 이벤트 타입과 이벤트 핸들러를 지정할 필요가 있다.
• 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.

<button type="button">Click me!</button>
<script>
const $button = document.querySelector('button');

// 이벤트 핸들러 프로퍼티에 이벤트 핸들러 바이딩
$button.onclick = function() {
    console.log('button click');
};

// 두번째로 바인딩된 이벤트 핸들러가 덮어쓰기 됨
$button.onclick = function() {
    console.log('button click2!!');
};
</script>

40.3.3 addEventListener 메서드 방식

• EventTaget.prototype.addEventListener 메서드를 사용하여 이벤트 핸들러를 등록할 수 있다.

• addEventListener 메서드에는 이벤트 핸들러를 인수로 전달하여 바인딩 한다.

• 만약, 이벤트 핸들러 프로퍼티 방식과 addEventListener 방식 모두 사용하면 2개의 이벤트 핸들러가 모두 호출 된다.

• addEventListener 메서드는 하나 이상의 이벤트 핸들러를 등록할 수 있다. 이때 이벤트 핸들러는 등록한 순서대로 호출된다.

• 만약 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록된다.

  EventTaget.addEventListener('eventType', functionName [, useCapture]);

• EventTaget : 이벤트 타깃

• eventType : 이벤트 타입

• functionName : 이벤트 핸들러

• useCapture : capture 사용 여부

  • true : capturing
  • false : bubbling(기본값))

<button type="button">Click me!</button>
<script>
const $button = document.querySelector('button');

// 첫번째 이벤트 핸들러가 먼저 실행되고
$button.addEventListener('click', function() {
    console.log('button click[1]');
})
// 그 다음에 두번째 이벤트 핸들러가 실행 된다.
$button.addEventListener('click', function() {
    console.log('button click[2]');
})

// 동일한 참조의 이벤트 핸들러 중복 등록
const handleClick = () => console.log('button click! [3]');
// 하나만 등록됨.
$button.addEventListener('click', handleClick);
$button.addEventListener('click', handleClick);
</script>

40.4 이벤트 핸들러 제거

• addEventListener 메서드로 등록한 이벤트 핸들러를 제거하려면 EventTarget.prototype.removeEventListener 메서드를 사용한다.
• removeEventListener 메서드에 전달할 인수는 addEventListener 메서드와 동일하다.
• 단, addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다.
• 무명 함수 이벤트를 핸들러로 등록한 경우 제거할 수 없다.
• 기명 함수를 이벤트 핸들러로 등록한 경우 이벤트 핸들러는 단 한번만 호출 되고, 기명 이벤트 핸들러 내부에서 제거는 가능하다.
• arguments.callee 를 사용하여 제거 하는 방법도 있지만, 권장하지는 않는다.
• 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러를 제거하려면 이벤트 핸들러 프로퍼티에 null을 할당해야 제거 할 수 있다.

<button type="button">Click me!</button>
<script>
const $button = document.querySelector('button');
const handleClick = () => console.log('button click! [3]');
// 이벤트 핸들러 등록
$button.addEventListener('click', handleClick);

$button.removeEventLister('click', handleClick, true); // 실패
$button.removeEventLister('click', handleClick); // 성공

// 기명 함수를 이벤트 핸들러로 등록
$button.addEventListener('click', function foo() {
    console.log('button click');
    $button.removeEventListener('click', foo);
})

// 이벤트 핸들러 프로퍼티 방식의 경우
$button.onclick = handleClick;
$button.onclick = null;
</script>

40.5 이벤트 객체

• 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다.
• 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
• 이벤트 객체를 전달받으려면 이벤트 핸들러를 정의할 때 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야 한다.
• 이벤트 핸들러 어트리뷰트 방식의 경우 이벤트 객체를 전달받으려면 이벤트 핸들러의 첫 번째 매개변수 이름이 반드시 'event'이어야 한다. 만약 event가 아닌 다른 이름으로 매개변수를 선언하면 이벤트 객체를 전달받지 못한다.

const $msg = document.querySelector('.msg');
// 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫번째 인수로 전달된다.
function showCoords(e) {
    $msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`;
}
document.onclick = showCoords;

// 이벤트 핸들러 어트리뷰트의 경우
<body onclick="showCoords(event)"></body>

40.5.1 이벤트 객체의 상속 구조

• 이벤트가 발생하면 이벤트 타입에 따라 다양한 타입의 이벤트 객체가 생성된다.
• 이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체도 생성자 함수에 의해 생성된다. 그리고 생성된 이벤트 객체는 생성자 함수와 더불어 생성되는 프로토타입으로 구상된 프로토타입 체인의 일원이 된다.
• 예를 들어, click 이벤트가 발생하면 암묵적으로 생성되는 MouseEvent 타입의 이벤트 객체는 다음과 같은 프로토타입 체인의 일원이 된다.
• Event 인터페이스에는 모든 이벤트 객체의 공통 프로퍼티가 정의되어 있고 FocusEvent, MouseEvent, keyboardEvent, WheelEvent 같은 하위 인터페이스에는 이벤트 타입에 따라 고유한 프로퍼티가 정의되어 있다.

40.5.2 이벤트 객체의 공통 프로퍼티

• Event.prototype에 정의되어 있는 이벤트 관련 프로퍼티는 UIEvent, CustomEvent, MouseEvent 등 모든 파생 이벤트 객체에 상속된다.

공통 프로퍼티

• type : 이벤트 타입
• target : 이벤트를 발생시킨 DOM 요소
• currentTarget : 이벤트 핸들러가 바인딩된 DOM 요소
• eventPhase : 이벤트 전파 단계
  • 0 : 이벤트 없음
  • 1 : 캡처링 단계
  • 2 : 타깃 단계
  • 3 : 버블링 단계
• bubbles : 이벤트를 버블링으로 전파하는지 여부. 다음 이벤트는 bubbles: false로 버블링하지 않는다.
  • 포커스 이벤트 : focus/blur
  • 리소스 이벤트 : load/unload/abort/error
  • 마우스 이벤트 : mouseenter/mouseleave
• cancelable : preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있는지 여부. 다음 이벤트는 cancelable : flase로 취소할 수 없다.
  • 포커스 이벤트 : focus/blur
  • 리소스 이벤트 : load/unload/abort/error
  • 마우스 이벤트 : dblclick/mouseenter/mouseleave
• defaultPrevented : preventDefault 메서드를 호출하여 이벤트를 취소했는지 여부
• isTrusted : 사용자의 행위에 의해 발생한 이벤트인지 여부.
  • 예시) click 메서드 또는 dispatchEvent 메서드를 통해 인위적으로 발생시킨 이벤트인 경우 isTrusted는 false다.
• timeStamp : 이벤트가 발생한 시각(1970/01/01/00:00:0부터 경과한 밀리초)

40.5.3 마우스 정보 취득

• MouseEvent 타입의 이벤트 객체는 다음과 같은 고유의 프로퍼티를 갖는다.
  • 마우스 포인터의 좌표 정보를 나타내는 프로퍼티 : screenX/screenY, clientX/clientY, pageX/pageY, offsetX/offsetY
  • 버튼 정보를 나타내는 프로퍼티 : altKey, ctrlKey, shiftKey, button

DOM 요소를 드래그하여 이동시키는 예제

<!-- css -->
<style>
.box {width: 100px; height: 100px; background: orange, border: 5px solid red; cursor: pointer;}
</style>
<!-- html -->
<div class="box"></div>
<!-- js -->
<script>
const $box = document.querySelector('.box');
// 드래그 시작 시점의 마우스 포인터 위치
const initailMousePos = { x: 0, y : 0 };
// 오프셋 : 이동할 거리
const offset = { x : 0, y : 0 };

// mousemove 이벤트 핸들러
const move = e => {
    // 오프셋 = 현재(드래그하고 있는 시점) 마우스 포인터 좌표 - 드래그 시작 시점의 마우스 포인터 좌표
    offset.x = e.clientX - initailMousePos.x;
    offset.y = e.clientY - initailMousePos.y;

    // translate3d는 GPU를 사용하므로 absolute의 top, left를 사용하는 것보다 빠르다.
    //top, left는 레이아웃에 영향을 준다.
    $box.style.transform = `translate3d(${offset.x}px, ${offset.y}px, 0)`;
};

// mousedown 이벤트가 발생하면 드래그 시작 시점의 마우스 포인터 좌표를 저장한다.
$box.addEventListener('mousedown', e => {
    // 한 번 이상 드래그로 이동한 경우 move에서 translate3d로 이동한 상태이므로 offset.x 와 offset.y를 빼주어야 한다.
    initailMousePos.x = e.clientX - offset.x;
    initailMousePos.y = e.clientY - offset.y;

    // mousedown 이벤트가 발생한 상태에서 mosemove 이벤트가 발생하면 box요소를 이동시킨다.
    document.addEventListener('mousemove', move);
});

// mouseup 이벤트가 발생하면 mousemove 이벤트를 제거해 이동을 멈춘다.
document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', move);
})
</script>

40.5.4 키보드 정보 취득

• KeyboardEvent 타입의 이벤트 객체는 altKey, ctrlKey, shiftKey, metaKey, key, keyCode 같은 고유의 프로퍼티를 갖는다.

input 요소의 입력 필드에 엔터 키가 입력되면 현재까지 입력 필드에 입력된 값을 출력하는 예제

<!-- html -->
<input type="text" />
<em class="message"></em>
<!-- js -->
<script>
const $input = document.querySelector('input[type=text]');
const $msg = document.querySelector('.message');

$input.onkeyup = e => {
    // e.key는 입력한 키 값을 문자열로 반환한다.
    if(e.key !== 'Enter') return;

    // 엔터키가 입력되면 현재까지 입력 필드에 입력된 값 출력
    $msg.textContent = e.target.value;
    e.target.value = '';
};
</script>

• 참고로 input 요소의 입력 필드에 한글을 입력하고 엔터키를 누르면 keyup 이벤트 핸들러가 두 번 호출되는 현상이 발생한다. 이 같은 문제를 회피하려면 keyup 이벤트 대신 keydown 이벤트를 캐치한다.

40.6 이벤트 전파

• 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다.
• 이벤트 객체가 전파되는 방향에 따라 3단계로 구분 된다.
  • 캡처링 단계 : 이벤트가 상위 요소에서 하위 요소 방향 으로 전파
  • 타깃 단계 : 이벤트가 이벤트 타깃에 도달
  • 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향 으로 전파
• 이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캐치할 수 있다.
• 하지만 addEventListener 메서드 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계, 캡처링 단계의 이벤트도 선별적으로 캐치할 수 있다. 캡처링 단계의 이벤트를 캐치하려면 addEventListener 메서드의 3번째 인수로 true를 전달해야 한다.
• 이처럼 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있다.

40.7 이벤트 위임

• 이벤트 위임 : 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법
• 이벤트 위임을 통해 하위 DOM 요소에서 발생한 이벤트를 처리할 때 주의할 점은 상위 요소에 이벤트 핸들러를 등록하기 때문에 이벤트 타깃이 개발자가 기대한 DOM 요소가 아닐수도 있다는 것이다. 그렇기 때문에 이벤트 핸들러가 실행되도록 이벤트 타깃을 검사할 필요가 있다.
• Element.prototype.matches 메서드는 인수로 전달된 선택자에 의해 특정 노드를 탐색 가능한지 확인한다.

function active({target}) {
    // 이벤트를 발생시킨 요소가 ul#fruits의 자식 요소가 아니라면 무시한다
    if (!target.matches('#fruits > li')) return;
}

40.8 DOM 요소의 기본 동작의 조작

40.8.1 DOM 요소의 기본 동작 중단

• 이벤트 객체의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중단시킨다.
• DOM 요소의 기본 동작이란, 예를 들어 a 요소를 클릭하면 href 어트리뷰트에 지정된 링크로 이동하고, checkbox 또는 radio 요수를 클릭하면 체크 또는 해제 되는 것을 말한다.

document.querySelector('a').onclick = e => {
    // a 요소의 기본 동작 중단
    e.preventDefault();
}
document.querySelector('input[type=checkbox]').onclick = e => {
    // checkbox 요소의 기본 동작 중단
    e.preventDefault();
}

40.8.2 이벤트 전파 방지

• 이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지시킨다.
• stopPropagation 메서드는 하위 DOM 요소의 이벤트를 개별적으로 처리하기 위해 이벤트의 전파를 중단시킨다.

// 이벤트 위임. 클릭된 하위 버튼 요소의 color 변경
document.querySelector('.container').onclick = ({target}) => {
    if(!target.matchecs('.container > button')) return;
    target.style.color = 'red';
};
// .btn2 요소는 이벤트를 전파하지 않으므로 상위 요소에서 이벤트를 캐치할 수 없다
document.querySelector('.btn2').onclick = e => {
    e.stopPropagation(); // 이벤트 전파 중단
    e.target.style.color = 'blue';
};

40.9 이벤트 핸들러 내부의 this

40.9.1 이벤트 핸들러 어트리뷰트 방식

• 이벤트 핸들러 어트리뷰트의 값으로 지정한 문자열은 사실 암묵적으로 생성되는 이벤트 핸들러의 문이다. 따라서 일반 함수로 호출된다.
• 일반 함수로서 호출되는 함수 내부의 this는 전역 객체를 가리킨다.
• 따라서 이벤트 핸들러 어트리뷰트의 값으로 지정한 함수 호출의 this는 전역 객체 window를 가리킨다.
• 단, 이벤트 핸들러를 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.

<button onclick="handleClick(this)">Click me!</button>
<script>
function handleClick(button) {
    console.log(button); // 이벤트를 바인딩한 button 요소
    console.log(this); // window
}
</script>

40.9.2 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식

• 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식 모두 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킨다. 즉, this는 이벤트 객체의 currentTarget 프로퍼티와 같다.
• 화살표 함수로 정의한 이벤트 핸들러 내부의 this는 상위 스코프의 this를 가리킨다. 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다.

<button type="button" class="btn1">0</button>
<button type="button" class="btn2">0</button>
<script>
const $button1 = document.querySelector('.btn1');
const $button2 = document.querySelector('.btn2');

// 이벤트 핸들러 프로퍼티 방식
$button1.onclick = function(e){
    console.log(this); // $button1
    console.log(e.currentTarget); // $button1
};

// addEventListener 방식
$button2.addEventListener('click', function(e){
    console.log(this); // $button2
    console.log(e.currentTarget); // $button2
});

// 이벤트 핸들러 프로퍼티 + 화살표 함수 방식 
$button1.onclick = (e) => {
    console.log(this); // window
    console.log(e.currentTarget); // $button1
};

// addEventListener + 화살표 함수 방식 
$button1.addEventListener('click', e => {
    console.log(this); // window
    console.log(e.currentTarget); // $button2
});
</script>

• 클래스에서 이벤트 핸들러를 바인딩 하는 경우 this에 주의해야 한다.
• 이벤트 핸들러 프로퍼티 방식이나 addEventListner 메서드 방식을 사용하는 경우, 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리기 때문에 메서드를 바인딩할 때 bind 메서드를 사용해 this를 전달하여 메서드 내부의 this가 클래스가 생성할 인스턴스를 가리키도록 해야 한다.
• 혹은 화살표 함수를 이벤트 핸들러로 등록하여 this를 해결할 수 있다. 다만, 화살표 함수를 사용하면 프로토타입 메서드가 아닌 인스턴스 메서드가 된다.

<button type="button" class="btn">0</button>
<script>
class App {
    constructor() {
        this.$button = document.querySelector('.btn');
        this.count = 0;

        // 이벤트 핸들러 프로퍼티 방식(클래스 필드에 일반 함수 등록)
        this.$button.onclick = this.increase1.bind(this);
        // 이벤트 핸들러 프로퍼티 방식(클래스 필드에 화살표 함수 등록)
        this.$button.onclick = this.increase2;
    }

    increase1() {
        this.$button.textContetn = ++this.count;
    }

    increase2 = () => this.$button.textContent = ++this.count;
}
</script>

40.10 이벤트 핸들러에 인수 전달

• 함수에 인수를 전달하려면 함수를 호출할 때 전달해야 한다.
• 이벤트 핸들러 어트리뷰트 방식은 함수 호출문을 사용할 수 있기 때문에 인수를 전달할 수 있다.
• 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식의 경우 이벤트 핸들러를 브라우저가 호출하기 때문에 함수 호출문이 아닌 함수 자체를 등록해야 한다. 인수를 전달할 수 없다.
• 인수를 전달하려면 1. 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전하는 방법과 2. 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달할 수도 있다.

<input type="text">
<em class="message"></em>
<script>
const MIN_USER_NAME_LENGTH = 5;
const $input = document.querySelector('input[type="text"]');
const $msg = document.querySelector('.message');

// 1. 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전하는 방법
const checkUserNameLength = min => {
    $msg.textContetn = $input.value.length < min ? `이름을 ${min}자 이상 입력해주세요.` : '';
};
$input.onblur = () => {
    checkUserNameLength(MIN_USER_NAME_LENGTH);
}

// 2. 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달하는 방법
const checkUserNameLength = min => e => {
    $msg.textContetn = $input.value.length < min ? `이름을 ${min}자 이상 입력해주세요.` : '';
};
$input.onblur = checkUserNameLength(MIN_USER_NAME_LENGTH);
</script>

40.11 커스텀 이벤트

40.11.1 커스텀 이벤트 생성

• Event 생성자 함수를 호출하여 명시적으로 생성한 이벤트 객체는 임의의 이벤트 타입을 지정할 수 있다. 이를 커스텀 이벤트라 한다. 임의의 문자열을 사용할 경우 CustomEvent 생성자 함수를 사용한다.
• new CustomEvent(이벤트 타입, {bubbles / cancelable})
  • 이벤트 타입 : 기존 이벤트 타입을 사용하거나, 임의의 문자열을 사용할 수 있다.
  • {bubbles / cancelable} : bubbles나 cancelable의 프로퍼티를 true로 설정시 이용할 수 있다. 또한, 커스텀이벤트의 타입에 따라 프로퍼티를 추가하여 설정할 수 있다.
• 생성된 커스텀 이벤트 객체는 버블링되지 않으며 preventDefault 메서드로 취소할 수도 없다. bubbles와 cancelable 프로퍼티의 값이 false로 기본 설정된다.
• 이벤트 생성자 함수로 생성한 커스텀 이벤트는 isTrusted 프로퍼티의 값이 언제나 false이고, 사용자 행위에 의해 발생한 이벤트에 의해 생성되 이벤트 객체는 isTrusted 프로퍼티 값은 언제나 true다.

const keyboardEvent = new KeyboardEvent('keyup');
console.log(keyboardEvent.type); // keyup

const customEvent = new CustomEvent('foo');
console.log(customEvent.type); // foo
console.log(customEvent.bubbles); // false
console.log(customEvent.cancelable); // false

const customEvent2 = new CustomEvent('bar', {
    bubbles: true,
    cancelable: true,
});
console.log(customEvent2.type); // foo
console.log(customEvent2.bubbles); // true
console.log(customEvent2.cancelable); // true
console.log(customEvent2.isTrusted); // false

const mouseEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    clientX: 50,
    clientY: 100
});
console.log(mouseEvent.clientX); // 50
console.log(mouseEvent.clientY); // 100

40.11.2 커스텀 이벤트 디스패치

• 생성된 커스텀 이벤트는 dispatchEvent 메서드로 디스패치(이벤트를 발생시키는 행위)를 할 수 있다.
• dispatchEvent 메서드에 이벤트 객체를 인수로 전달하면서 호출하면 인수로 전달한 이벤트 타입의 이벤트가 발생한다.
• dispatchEvent 메서드는 이벤트 핸들러를 동기 처리 방식으로 호출한다. dispatchEvent 메서드를 호출하면 커스텀 이벤트에 바인딩된 이벤트 핸들러를 직접 호출하는 것과 같다.
• customEvent 이벤트 생성자 함수에는 두 번째 인수로 이벤트와 함께 전달하고 싶은 정보를 담은 detail 프로퍼티를 포함하는 객체를 전달할 수 있다.
• 커스텀 이벤트 객체를 생성한 경우 반드시 addEventListener 메서드 방식으로 이벤트 핸드러를 등록 해야 한다.

<button type="button" class="btn">0</button>
<script>
const $button = document.querySelector('.btn');

// 버튼 요소에 foo 커스텀 이벤트 핸들러 등록
// 커스텀 이벤트를 디스패치하기 이전에 이벤트 핸드러를 등록해야 한다.
$button.addEventListener('foo', e => {
    alert(e.detail.message);
});

// CustomEvent 생성자 함수로 foo 이벤트 타입의 커스텀 이벤트 객체를 생성
const customEvent = new CustomEvent('foo', {
    detail: { message: 'Hello' } // 이벤트와 함께 전달하고 싶은 정보
});

// 커스텀 이벤트 디스패치(커스텀 이벤트 실행)
$button.dispatchEvent(customEvent);
</script>