[모던 JS Deep Dive] 40장 - 이벤트

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

  - 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶으면

    해당 타입 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임함

    - 언제 함수를 호출할지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라

      브라우저에게 함수 호출을 위임하는 것

  - 이벤트 핸들러: 이벤트 발생 시 호출될 함수

  - 이벤트 핸들러 등록: 이벤트 발생 시 브라우저에게 이벤트 핸들러의 호출을 위임하는 것

  - 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용 가능

  - 이벤트 드리븐 프로그래밍: 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식

40.2 이벤트 타입

  - 마우스 이벤트

    - click: 마우스 버튼 클릭

    - dblclick: 마우스 버튼 더블 클릭

    - mousedown: 마우스 버튼 눌렀을 때

    - mouseup: 누르고 있던 마우스 버튼 놓았을 때

    - mousemove: 마우스 커서 움직였을 때

    - mouseenter: 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링 되지 않음)

    - mouseover: 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링됨)

    - mouseleave: 마우스 커서를 HTML 요소 밖으로 이동했을 때 (버블링 되지 않음)

    - mouseout: 마우스 커서를 HTML 요소 밖으로 이동했을 때 (버블링됨)

  - 키보드 이벤트

    - keydown: 모든 키 눌렀을 때 발생

    - keypress: 문자 키 눌렀을 때 연속적으로 발생 (deprecated)

    - keyup: 누르고 있던 키를 놓았을 때 한 번만 발생

  - 포커스 이벤트

    - focus: HTML 요소가 포커스를 받았을 때 (버블링 되지 않음)

    - blur: HTML 요소가 포커스를 잃었을 때 (버블링 되지 않음)

    - focusin: HTML 요소가 포커스를 받았을 때 (버블링됨)

    - focusout: HTML 요소가 포커스를 잃었을 때 (버블링됨)

  - 폼 이벤트

    - submit: form 요소 내의 submit 버튼 클릭했을 때

    - reset: form 요소 내의 reset 버튼을 클릭했을 때 (최근 사용 안함)

  - 값 변경 이벤트

    - input: input(text, checkbox, radio), select, textarea 요소의 값이 입력되었을 때

    - change: input(text, checkbox, radio), select, textarea 요소의 값이 변경되었을 때

    - readystatechange: HTML 문서의 로드와 파싱 상태 나타내는 document.readyState 프로퍼티 값이 변경되었을 때

  - DOM 뮤테이션 이벤트

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

  - 뷰 이벤트

    - resize: 브라우저 윈도우 크기를 리사이즈할 때 연속적으로 발생

    - scroll: 웹페이지(document) 또는 HTML 요소를 스크롤할 때 연속적으로 발생

  - 리소스 이벤트

    - load: DOMContentLoaded 이벤트 발생 이후, 모든 리소스(폰트, 이미지 등)의 로딩이 완료되었을 때

    - unload: 리소스가 언로드될 때 (주로 새로운 웹페이지 요청한 경우)

    - abort: 리소스 로딩 중단되었을 때

    - error: 리소스 로딩 실패했을 때

40.3 이벤트 핸들러 등록

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

    - on 접두사 + 이벤트 타입

    - 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문 할당

      - 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체 의미

      - 이벤트 핸들러 어트리뷰트 값으로 여러 개의 문 할당 가능

      - 이벤트 핸들러에 인수 전달하기 위해 호출문 할당함

    - 사용 권장하지 않지만 CBD 기반의 라이브러리/프레임워크에서는 이 방식으로 이벤트 처리함

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

    - 이벤트 타깃.on+이벤트 타입 = 이벤트 핸들러 (함수 참조 할당)

    - DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티 가지고 있음

    - 이벤트 핸들러 프로퍼티에 함수 바인딩하면 이벤트 핸들러 등록됨

    - 이벤트 핸들러는 이벤트 타깃 또는 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩함

    - 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩 가능

  - addEventListener 메서드 방식

    - DOM Level 2, EventTarget.prototype.addEventListener 메서드

      - 이벤트 타깃.addEventListener('이벤트 타입', 이벤트 핸들러 [, useCapture])

    - 이벤트 핸들러를 인수로 전달

    - 하나 이상의 이벤트 핸들러 등록 가능, 등록된 순서대로 호출됨

    - 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 핸들러만 등록됨 

40.4 이벤트 핸들러 제거

  - EventTarget.prototype.removeEventListener 메서드

    - 익명 함수로 등록한 이벤트 핸들러는 제거 불가

    - 익명 함수로 등록한 이벤트 핸들러 내부에서 단 한 번만 호출되고 제거하려면

      arguments.callee (호출된 함수, 함수 자신) 이용 => strict mode에서는 사용 금지

    - 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 null 할당해서 제거해야 함

      - removeEventListener 메서드 사용해서 제거 불가

40.5 이벤트 객체

  - 이벤트 객체의 상속 구조

    - Object

      - Event

        - AnimationEvent

        - UIEvent

          - FocusEvent

          - MouseEvent

            - DragEvent

            - WheelEvent

          - KeyboardEvent

          - InputEvent

          - TouchEvent

        - ClipBoardEvent

        - CustomEvent

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

    - Event.prototype에 정의되어 있는 이벤트 관련 프로퍼티

      - Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티임

      - type: 이벤트 타입 (string)

      - target: 이벤트 발생시킨 DOM 요소 (DOM 요소 노드)

      - currentTarget: 이벤트 핸들러가 바인딩된 DOM 요소 (DOM 요소 노드)

      - eventPhase: 이벤트 전파 단계 (number)

        - 0: 이벤트 없음, 1: 캡처링, 2: 타깃, 3: 버블링

      - bubbles: 이벤트를 버블링으로 전파하는지 여부 (boolean)

      - cancelable: preventDefault 메서드 호출하여 이벤트 기본 동작 취소 가능한지 여부 (boolean)

      - defaultPrevented: preventDefault 메서드 호출하여 이벤트 취소했는지 여부 (boolean)

      - isTrusted: 사용자 행위에 의해 발생한 이벤트인지 여부 (boolean)

      - timeStamp: 이벤트 발생한 시각 (number)

  - 마우스 정보 취득

    - MouseEvent 타입의 이벤트 객체

    - 마우스 포인터 좌표 정보 나타내는 프로퍼티: screenX/screenY, clientX/clientY, pageX/pageY, offsetX/offsetY

      - clientX/clientY: viewport, 웹페이지 가시 영역 기준 마우스 포인터 좌표

      - offsetX/offsetY: 이동 거리

    - 버튼 정보 나타내는 프로퍼티: altKey, ctrlKey, shiftKey, button

  - 키보드 정보 취득

    - KeyboardEvent 타입의 이벤트 객체

      - altKey, ctrlKey, shiftKey, metaKey, key, keyCode 등 고유 프로퍼티 가짐

      - keyCode 프로퍼티는 폐지되었으므로 key 프로퍼티 사용 권장 (입력한 키 값을 문자열로 반환)

40.6 이벤트 전파

  - Event Propagation: DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됨

    - 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리 통해 전파됨

    - Capturing: 이벤트가 상위 요소에서 하위 요소 방향으로 전파

    - Target Phase: 이벤트가 이벤트 타깃에 도달

    - Bubbling: 이벤트가 하위 요소에서 상위 요소 방향으로 전파

  - 이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계만 캐치 가능

  - addEventListener 메서드의 3번째 인수로 true 전달하면 캡처링 단계의 이벤트 캐치 가능

  - 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치 가능

40.7 이벤트 위임

  - Event Delegation: 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신

    하나의 상위 DOM 요소에 이벤트 핸들러 등록하는 방법

  - Element.prototype.matches 메서드

    - 인수로 전달된 선택자에 의해 특정 노드 탐색 가능한지 확인

40.8 DOM 요소의 기본 동작 조작

  - DOM 요소의 기본 동작 중단

    - 이벤트 객체의 preventDefault 메서드

      - DOM 요소의 기본 동작 중단

  - 이벤트 전파 방지

    - 이벤트 객체의 stopPropagation 메서드

      - 이벤트 전파 중지

      - 하위 DOM 요소의 이벤트를 개별적으로 처리하기 위함

40.9 이벤트 핸들러 내부의 this

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

    - 이벤트 핸들러 함수 내부의 this는 전역 객체 가리킴

    - 이벤트 핸들러 호출 시 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소 가리킴

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

    - 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소 가리킴

    - 이벤트 객체의 currentTarget 프로퍼티와 같음

    - 화살표 함수로 정의한 이벤트 핸들러 내부의 this는 상위 스코프의 this 가리킴

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

  - 이벤트 핸들러 내부에서 함수 호출하면서 인수 전달 가능

  - 이벤트 핸들러를 반환하는 함수를 호출하면서 인수 전달 가능

40.11 커스텀 이벤트

  - 커스텀 이벤트 생성

    - 커스텀 이벤트: 개발자의 의도로 생성된 이벤트

    - CustomEvent 이벤트 생성자 함수

    - 생성된 커스텀 이벤트 객체는 버블링 되지 않으며 preventDefault 메서드로 취소 불가

    - 이벤트 생성자 함수로 생성한 커스텀 이벤트는 isTrusted 프로퍼티 값이 언제나 false임

      - 커스텀 이벤트가 아닌 사용자의 행위에 의해 발생한 이벤트에 의해 생성된 이벤트 객체는 true임

  - 커스텀 이벤트 디스패치

    - 생성된 커스텀 이벤트는 dispatchEvent 메서드로 dispatch (이벤트 발생시키는 행위) 가능

    - dispatchEvent 메서드는 이벤트 핸들러를 동기 처리 방식으로 호출함

    - CustomEvent 생성자 함수 사용한 경우에는 반드시 addEventListener 방식으로 이벤트 핸들러 등록