[모던 자바스크립트 딥다이브] 40장 이벤트

이벤트 드리븐 프로그래밍

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

 

 

이벤트 타입

• 마우스 이벤트

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	리소스 로딩이 실패했을 때

 

 

이벤트 핸들러 등록

1. 이벤트 핸들러 어트리뷰트 방식
   • HTML 요소의 어트리뷰트 중 이벤트 핸들러 어트리뷰트를 사용해 이벤트 핸들러를 등록
   • on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어짐
   • 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록됨
   • 함수 참조가 아닌 함수 호출문 등의 문을 할당한다는 점! => 함수가 아닌 값을 반환하는 함수 호출문을 등록할 경우 브라우저가 이벤트 핸들러를 참조할 수 없음
   • 이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미
   • HTML과 자바스크립트가 뒤섞이는 문제가 발생함
   • 여러 개의 이벤트 핸들러 등록 가능
2. 이벤트 핸들러 프로퍼티 방식
   • window 객체, Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 갖음
   • on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어짐
   • 이벤트를 발생시킬 객체인 이벤트 타깃, 이벤트의 종류를 나타내는 문자열인 이벤트 타입, 그리고 이벤트 핸들러를 지정해야 함
   • HTML과 자바스크립트가 뒤섞이는 문제 해결
   • 하나의 이벤트 핸들러만 바인딩 가능
3. 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 메서드로 이벤트 핸들러를 동기 처리 방식으로 호출 가능함