40장: 이벤트
40.1 이벤트 드리븐 프로그래밍
이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수
이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임
이벤트 드리븐 프로그래밍: 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식
40.2 이벤트 타입
40.2.1 마우스 이벤트
40.2.2 키보드 이벤트
40.2.3 포커스 이벤트
focusin, focusout 이벤트 핸들러는 addEventListener 메서드 방식을 사용해 등록해야 한다
40.2.4 폼 이벤트
40.2.5 값 변경 이벤트
40.2.6 DOM 뮤테이션 이벤트
40.2.7 뷰 이벤트
40.2.8 리소스 이벤트
40.3 이벤트 핸들러 등록
40.3.1 이벤트 핸들러 어트리뷰트 방식
어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록된다
40.3.2 이벤트 핸들러 프로퍼티 방식
40.3.3 addEventListener 메서드 방식
addEventListener메서드를 통해 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록 된다
40.4 이벤트 핸들러 제거
EventTarget.prototype.removeEventListener 메서드를 사용한다
addEventListener메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치해야 한다
이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러를 제거하려면 null을 할당
40.5 이벤트 객체
40.5.1 이벤트 객체의 상속 구조
40.5.3 마우스 정보 취득
드래그는 mousedown이벤트가 발생한 상태에서 mousemove 이벤트가 발생한 시점에 시작하고 mouseup 이벤트가 발생한 시점에 종료
40.5.4 키보드 정보 취득
한글을 입력하고 엔터키를 누르면 keyup이벤트 핸들러가 두 번 호출 되므로 대신 kedown이벤트를 캐치한다
40.6 이벤트 전파
생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파
- 캡처링 단계: 이벤트가 상위 요소에서 하위 요소 방향으로 전파
- 타깃 단계: 이벤트가 이벤트 타깃에 도달
- 버블링 단계: 이벤트가 하위 요소에서 상위 요소 방향으로 전파
40.7 이벤트 위임
하나의 상위 DOM요소에 이벤트 핸들러를 등록
40.8 DOM 요소의 기본 동작의 조작
40.8.1 DOM 요소의 기본 동작 중단
preventDefault 메서드는 DOM요소의 기본 동작을 중단
40.8.2 이벤트 전파 방지
stopPropagation 메서드는 이벤트 전파를 중지
40.9 이벤트 핸들러 내부의 this
40.9.2 이벤트 핸들러 프로퍼티 방식과addEventListener 메서드 방식
이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM요소를 가리킨다
즉, this는 이벤트 객체의 currentTarget 프로퍼티와 같다
40.10 이벤트 핸들러에 인수 전달
이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달
이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달
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커스텀 이벤트 객체는 버블링되지 않으며 preventDefault 메서드로 취소할 수 없다
40.11.2 커스텀 이벤트 디스패치
dispatchEvent메서드는 이벤트 핸들러를 동기 처리 방식으로 호출
41장: 타이머
41.1 호출 스케줄링
함수를 일정 시간이 경과된 ㅣ후에 호출되도록 함수 호출을 예약
41.2 타이머 함수
41.2.1 setTimeout / clearTimeout
const timeoutId = setTimeput(func|code[,delay,param1,param2,...]);
41.2.2 setInterval / clearInterval
- setInterval함수는 두 번째 인수로 전달받은 시간으로 반복 동작하는 타이머를 생성, 타이머가 만료될 때 마다 첫 번째 인수로 전달받은 콜백 함수가 반복 호출, 타이머가 취소될 때까지 계속 된다
- clearInterval은 호출 스케줄링을 취소
41.3 디바운스와 스로틀
41.3.1 디바운스
짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다
41.3.2 스로틀
짧은 시간 간격으로 발생하는 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한번만 호출
짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다
