FE/리뷰
[모던 자바스크립트 딥다이브] 40장 이벤트
따봉치치
2024. 5. 17. 15:43
이벤트 드리븐 프로그래밍
- 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트를 발생시킴
- 만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에 알려 호출을 위임함 => 함수를 언제 호출할지 알 수 없으므로
- 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수
- 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것
- 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식
이벤트 타입
- 마우스 이벤트
| click | 마우스 버튼을 클릭했을 때 |
| dbclick | 마우스 버튼을 더블 클릭했을 때 |
| mousedown | 마우스 버튼을 눌렀을 때 |
| mouseup | 누르고 있던 마우스 버튼을 놓았을 때 |
| mousemove | 마우스 커서를 움직였을 때 |
| mouseenter | 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링 안됨) |
| mouseover | 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링 됨) |
| mouseleave | 마우스 커서를 HTML 요소 밖으로 이동했을 때 |
| mouseout | 마우스 커서를 HTML 요소 밖으로 이동했을 때 |
- 키보드 이벤트
| keydown | 모든 키를 눌렀을 때 발생 |
| keypress | 문자 키를 눌렀을 때 발생 |
| keyup | 누르고 있던 키를 놓았을 때 한 번만 발생 |
- 포커스 이벤트
| focus | HTML 요소가 포커스를 받았을 때(버블링 안됨) |
| blur | HTML 요소가 포커스를 잃었을 때(버블링 안됨) |
| focusin | HTML 요소가 포커스를 받았을 때(버블링 됨) |
| focusout | HTML 요소가 포커스를 잃았을 때(버블링 됨) |
- 폼 이벤트
| submit | form 요소 내의 input, select 입력 필드에서 엔터를 눌렀을 때, form 요소 내의 submit 버튼을 클릭했을 때 |
| reset | form 요소 내의 reset 버튼을 클릭했을 때 |
- 값 변경 이벤트
| input | input, select, textarea 요소의 값이 입력되었을 때 |
| change | input, select, textarea 요소의 값이 변경되었을 때 |
| readystatechange | HTML 문서의 로드와 파싱 상태를 나타내는 document.readyState 프로퍼티 값이 변경될 때 |
- DOM 뮤테이션 이벤트
| DOMContentLoaded | HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료되었을 때 |
- 뷰 이벤트
| resize | 브라우저 윈도우 크기를 리사이즈할 때 연속적으로 발생함 (오직 window 객체에서만 발생) |
| scroll | 웹페이지 또는 HTML 요소를 스크롤할 때 연속적으로 발생 |
- 리소스 이벤트
| load | DOMContentLoaded 이벤트가 발생한 이후, 모든 리소스의 로딩이 완료되었을 때 |
| unload | 리소스가 언로드될 때(주로 새로운 웹페이지를 요청한 경우) |
| abort | 리소스 로딩이 중단되었을 때 |
| error | 리소스 로딩이 실패했을 때 |
이벤트 핸들러 등록
- 이벤트 핸들러 어트리뷰트 방식
- HTML 요소의 어트리뷰트 중 이벤트 핸들러 어트리뷰트를 사용해 이벤트 핸들러를 등록
- on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어짐
- 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록됨
- 함수 참조가 아닌 함수 호출문 등의 문을 할당한다는 점! => 함수가 아닌 값을 반환하는 함수 호출문을 등록할 경우 브라우저가 이벤트 핸들러를 참조할 수 없음
- 이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미
- HTML과 자바스크립트가 뒤섞이는 문제가 발생함
- 여러 개의 이벤트 핸들러 등록 가능
- 이벤트 핸들러 프로퍼티 방식
- window 객체, Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 갖음
- on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어짐
- 이벤트를 발생시킬 객체인 이벤트 타깃, 이벤트의 종류를 나타내는 문자열인 이벤트 타입, 그리고 이벤트 핸들러를 지정해야 함
- HTML과 자바스크립트가 뒤섞이는 문제 해결
- 하나의 이벤트 핸들러만 바인딩 가능
- addEventListener 메서드 방식
- DOM level 2에서 도입된 EventTaget.prototype.addEventListener 메서드를 사용해 이벤트 핸들러 등록 가능
- 이벤트 핸들러를 인수로 전달함
- 하나 이상의 이벤트 핸들러 등록 가능, 등록된 순서대로 호출됨
- 참조가 동일한 이벤트 핸들러를 등록하면 하나만 등록됨
이벤트 핸들러 제거
- addEventListener 메서드로 등록한 이벤트 핸들러를 제거하려면 EventTarget.prototype.removeEventListener 메서드를 사용해 제거 가능
- addEventListener 메서드와 동일한 인수를 전달해야함
- 이벤트 핸들러 프로퍼티 방식은 null을 할당해야 제거 가능
이벤트 객체
- 이벤트가 발생하면 이벤트에 대한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성
- 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달됨
- 이벤트 핸들러 어트리뷰트 방식의 경우 이벤트 객체를 전달받으려면 첫 번째 매개변수 이름이 반드시 event 이어야 함
이벤트 객체의 상속 구조
- Event, UIEvent, MouseEvent 모두 생성자 함수, 생성자 함수를 호출하여 이벤트 객체 생성 가능
- click 이벤트가 발생하명 MouseEvent 타입의 객체도 암묵적으로 생성되면서 프로토타입 체인의 일원이 됨
이벤트 객체의 공통 프로퍼티
- Event 인터페이스의 이벤트 관련 프로퍼티를 모든 이벤트 객체가 상속받는 공통 프로퍼티
| type | 이벤트 타입 |
| target | 이벤트를 발생시킨 DOM 요소 |
| currentTarget | 이벤트 핸들러가 바인딩된 DOM 욧 |
| eventPhase | 이벤트 전파 단계 0 : 이벤트 없음, 1 : 캡쳐링, 2 : 타깃 : 3 : 버블링 |
| bubbles | 이벤트를 버블링으로 전파하는지 여부 |
| cancelable | preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소시킬 수 있는지 여부 |
| defaultPrevented | preventDefault 메서드를 호출하여 이벤트를 취소했는지 여부 |
| inTrusted | 사용자의 행위에 의해 발생한 이벤트인지 여부 |
| timeStamp | 이벤트가 발생한 시각 |
마우스 정보 취득
- MouseEvent 타입의 이벤트 객체는 고유의 프로퍼티를 갖음
- 마우스 포인터의 좌표 정보를 나타내는 프로퍼티
- 버튼 정보를 나타내는 프로퍼티
키보드 정보 취득
- KeyboardEvent 타입의 이벤트 객체는 고유의 프로퍼티를 갖음
- altKey
- ctrlKey
- shiftKey
- metaKey
- key
- keyCode
이벤트 전파
- DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됨
- 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파됨
- 캡처링 단계 : 이벤트가 상위 => 하위 요소로 전파
- 타깃 단계 : 이벤트가 이벤트 타깃으로 도달
- 버블링 단계 : 이벤트가 하위 => 상위 요소로 전파
- 이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃, 버블링 단계의 이벤트만 캐치 가능
- addEventListener 메서드 방식으로 등록한 이벤트 핸들러는 타깃, 버블링, 캡처링 단계의 이벤트 선별적으로 캐치 가능
- 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치 가능
- 버블링을 통해 전파되지 않는 이벤트도 있음
- 포커스 이벤트 : focus/blur
- 리소스 이벤트 : load/unload/abort/error
- 마우스 이벤트 : mouseenter/mouseleave
이벤트 위임
- 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법
- 타깃 검사 필요
- 이벤트 위임을 통해 이벤트를 바인딩할 경우 taget, currentTarget 프로퍼티가 다른 DOM 요소를 가리킬 수 있음
DOM 요소의 기본 동작 조작
- 기본 동작 중단
- preventDefault 메서드로 DOM 요소의 기본 동작 중단
- 이벤트 전파 방지
- stopPropagation 메서드로 이벤트 전파 중지
- 하위 DOM 요소의 이벤트 개별적 처리 가능
이벤트 핸들러 내부의 this
- 이벤트 핸들러 어트리뷰트 방식
- 전역 객체 window 가리킴
- 이벤트 핸들러를 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소를 가리킴
- 이벤트 핸들러 프로퍼티 , addEventListener 메서드 방식
- 이벤트를 바인딩한 DOM 요소 가리킴
- 이벤트 객체의 currentTarget 프로퍼티와 같음
- 화살표 함수로 정의한 이벤트 핸들러는 상위 스코프의 this를 갖음
이벤트 핸들러에 인수 전달
- 이벤트 햄들러 함수에서 함수를 호출하면서 인수 전달 가능
- 이벤트 핸들러를 반환하는 함수를 호출하면서 인수 전달 가능
커스텀 이벤트
- 개발자의 의도로 생성된 이벤트
- 첫 번째 인수로 이벤트 타입을 나타내는 문자열
- 생성된 이벤트 객체는 버블링 되지 않으며 preventDefault 메서드로 취소 불가함
- 디스패치 가능 => 일반적으로 이벤트 핸들러는 비동기 처리 방식으로 동작하지만, dispatchEvent 메서드로 이벤트 핸들러를 동기 처리 방식으로 호출 가능함