[모던 JS] CH40. 이벤트

CH40. 이벤트

 

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

- 처리해야 할 특정 사건이 발생하면 이벤트를 발생시킴

- 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러

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

40.2 이벤트 타입

- 이벤트의 종료를 나타내는 문자열

- 교재 p. 755~ 757

40.3 이벤트 핸들러 등록

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

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

- 알아둘 필요는 있지만 사용하지 않는 것이 좋음

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

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

- 이벤트 핸들러 어트리뷰트 방식의 HTML과 자바스크립트가 뒤섞이는 문제를 해결할 수 있지만,

  이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있음

40.3.3 addEventListener메서드 방식

- 하나 이상의 이벤트 핸들러를 등록할 수 있음

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

40.4 이벤트 핸들러 제거

- 이벤트 핸들러 제거 시 EvenTarget.prototype.removeEventListener 메서드 사용

- 단, 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않음

: 동일한 함수여야 함!

: 무명 함수를 이벤트 핸들러로 등록한 경우 제거 불가

: 제거하려면 변수나 자료구조에 핸들러의 참조를 저장하고 있어야 함

40.5 이벤트 객체

- 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성됨

- 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달됨

- 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달되어 매개변수 e에 암묵적으로 할당됨

40.5.1 이벤트 객체의 상속 구조

- 이벤트 객체의 상속 구조

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

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

- 일반적으로 이벤트 객체의 target 프로퍼티와 currentTarget 프로퍼티는 동일한 DOM 요소를 가리키지만, 나중에 살펴볼 이벤트 위임에서는 이벤트 객체의 target 프로퍼티와 currentTarget프로퍼티가 서로 다른 DOM 요소를 가리킬 수 있음

40.5.3 마우스 정보 취득

- 마우스 포인터의 좌표 정보를 나타내는 프로퍼티와 버튼 정보를 나타내는 프로퍼티

40.5.4 키보드 정보 취득

- keydown, keyup, keypress 이벤트가 발생하면 생성되는 KeyboardEvent 타입의 이벤트 객체는 고유 객체를 가짐

40.6 이벤트 전파

- 이벤트 전파

: DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전차됨

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

 

1. 캡처링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파

2. 타깃 단계 : 이벤트가 이벤트 타깃에 도달

3. 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파

 

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

40.7 이벤트 위임

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

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

40.8 DOM 요소의 기본 동작 조작

40.8.1 DOM 요소의 기본 동작 중단

- 이벤트 객체의 preventDefalut 메서드는 DOM 요소의 기본 동작을 중단시킴

40.8.2 이벤트 전파 방지

- stopPropagation

: 이벤트 전파를 중지시킴

40.9 이벤트 핸들러 내부의 this

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

- 이벤트 핸들러를 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소

- 아래 예제의 this는 window 객체를 가리킴

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

- 이벤트 핸들러 내부의 this는 이벤트 객체의 currentTarget 프로퍼티

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

- 화살표 함수는 함수 자체의 this 바인딩을 갖지 않음

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

- 이벤트 핸들러에 인수 전달하는 방법 1

- 방법 2

: 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달할 수도 있음