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

 

 

이벤트 핸들러 등록
  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 메서드로 이벤트 핸들러를 동기 처리 방식으로 호출 가능함