[js] 자바스크립트 DeepDive 40장 요약 : 이벤트

* 본 내용은 자바스크립트 DeepDive 내용을 참고하여 정리한 것입니다.

 

40장. 이벤트

 

1. 이벤트 드리븐 프로그래밍

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

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

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

 

2. 이벤트 타입

- 이벤트 타입이란, 이벤트의 종류를 나타내는 문자열

- 마우스 이벤트 타입: click, dbclick, mousedown등

- 키보드 이벤트 타입: keydown. keypress, keyup 등

- 포커스 이벤트: focus, blur, focusin, focusdown 등

- 폼 이벤트: submit, reset

- 값 변경 이벤트: input, change, readystatechange 

- DOM뮤테이션 이벤트: DOMContentLoaded

- 뷰 이벤트: resize, scroll

- 리소스 이벤트: load, unload, abort, error

 

3. 이벤트 핸들러 등록

- 이벤트 핸들러를 등록하는 방식은 3가지로 나뉜다.

 

 1) 이벤트 핸들러 어트리뷰트방식

- 이름은 접두사와 이벤트 타입으로 이루어진다

- 이벤트 핸들러 어트리뷰트 값으로 문을 할당하면 이벤트 핸들러가 등록된다

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

- 구형 코드에서 간혹 방식을 사용한 것이 존재하기에 알아둘 필요는 있으나, 사용하지 않는 것을 권장한다

 

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

- 이벤트 타깃(이벤트를 발생시킬 객체)과 이벤트 타입(이벤트 종류), 이벤트 핸들러를 지정할 필요 있다

- 해당 방식은 이벤트 핸들러 어트리뷰트 방식의 html과 javascript가 뒤섞이는 문제를 해결할 수 있다

 

3) addEventListener 메서드 방식

- DOM Level2에서 도입된 eventtarget.prototype.addeventlistener메서드를 사용하여 이벤트 핸들러를 등록할 수 있다.

- 해당 메서드의 첫 번째 매개변수에는 이벤트 타입을 전달한다.

- 두 번째 매개변수에는 이벤트 핸들러를 전달한다.

- 마지막 매개변수에는 이벤트를 캐치할 이벤트 전파 단계를 지정한다.

 

4. 이벤트 핸들러 제거

- addEventListener메서드로 등록한 이벤트 핸들러를 제거하려면 EventTarget.prototype.removeEventListener메서드를 사용한다.

-  addEventListener메서드에 전달한 인수와 removeEventListener메서드에 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다. (즉 동일해야 함.)

- 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 removeEventListner메서드로 제거할 수 없다.

 

5. 이벤트 객체

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

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

 

5.1) 이벤트 객체의 상속 구조

- 이벤트 객체는 기본적으로 object-event-생성자함수과 같은 상속구조를 가진다.

- 생성자함수를 호출하여 이벤트객체를 호출할 수 있다.

- 생성된 이벤트 객체는 생성자 함수와 더불어 생성되는 프로토타입으로 구성된 프로토타입 체인의 일원이 된다.

 

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

- event.prototype.에 정의되어 있는 이벤트 관련 프로퍼티는 uievent, customevent 등 모든 파생 이벤트 객체에 상속된다.

- 이벤트 객체의 공통 프로퍼티에는 type, target, currentTarget, eventPhase, bubbles, cancelable, defaltPrevented, isTrusted, timeStamp 등이 있다.

 

5.3) 마우스 정보 취득

- mouseEvent타입의 이벤트 객체는 1) 마우스 포인터의 좌표를 나타내는 프로퍼티 (screenX/screenY 등)와 2) 버튼 정보를 나타내는 프로퍼티 (altkey, ctrlkey 등)와 같은 고유 프로퍼티를 가진다.

 

5.4) 키보드 정보 취득

- keydown, keyup, keypress이벤트 발생 시 생성되는 keyboardEvent타입의 이벤트 객체는 altkey, ctrlkey, shiftkey, metakey, key, keycode와 같은 고유 프로퍼티를 가진다.

 

6. 이벤트 전파

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

- 캡처링 단계, 타깃 단계, 버블링 단계 순으로 전파된다

- 캡처링 단계란 이벤트가 상위 요소에서 하위 요소로 전파되는 것

- 타깃 단계란, 이벤트가 이벤트 타깃에 도달하는 것

- 버블링 단계란, 이벤트가 하위 요소에서 다시 상위 요소로 전파되는 것.

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

 

7. 이벤트 위임

- 이벤트 위임이란 여러 개의 하위 dom요소에 각각 이벤트 핸들러를 등록하는 대신, 하나의 상위 dom요소에 이벤트 핸들러를 등록하는 방법이다.

- 이벤트 위임을 통해 상위 dom요소에 이벤트 핸들러를 등록하면 하위 dom요소에 이벤트 핸들러를 등록할 필요가 없으며, 동적으로 하위 dom요소를 추가하더라도 기 추가된 dom요소에 이벤트 핸들러를 등록할 필요가 없다.

- 이벤트 위임을 통해 하위 dom요소에서 발생한 이벤트를 처리할 때 주의점은 상위요소에 이벤트 핸들러를 등록하므로 개발자가 기대한 dom요소가 아닐 수도 있다는 것이다.

- 이에 이벤트에 반응이 필요한 dom요소에 한정하여 이벤트 핸들러가 실행되도록 이벤트 타깃을 검사할 필요가 있다.

 

8.. dom요소의 기본 동작

- 이벤트 객체의 preventDefault메서드는 dom요소의 기본 동작을 중단시킨다.

- 이벤트 객체의 stopPropagation메서드는 이벤트 전파를 중단시킨다.

 

9. 이벤트 핸들러 내부의 this

- 이벤트 핸들러 어트리뷰트 방식에서 이벤트 핸들러를 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 dom요소를 가리킨다.

- 이벤트 핸들러 프로퍼티 방식과 addEventListener메서드 방식 모두 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 dom요소를 가리킨다.

- 화살표 함수로 정의한 이벤트 핸들러 내부의 this는 상위 스코프의 this를 가리킨다. (화살표 함수는 함수 자체의 this바인딩을 가지고 있지 않다)

 

10. 이벤트 핸들러에 인수 전달

- 이벤트 핸들러  어트리뷰트 방식은 함수 호출문을 사용할 수 있기 때문에 인수를 전달할 수 있음

- 이벤트 핸들러 프로퍼티 방식과 addEventListener메서드 방식의 경우 이벤트 핸들러를 브라우저가 호출하므로 함수 자체를 등록해야하므로 인수전달이 불가함. 이 경우에는 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달할 수 있다.

- 또는, 이벤트 핸들러를 반환하는 함수를 호출하면서 전달할 수도 있다.

 

11. 커스텀 이벤트

- 커스텀 이벤트란, 개발자의 의도로 생성된 이벤트를 뜻함.

- 첫 번째 인수로 이벤트 타입을 나타내는 문자열을 전달받는다 (기존 이벤트 타입 혹은 임의의 문자열... CustomEvent생성자 함수 사용)

- 생성된 커스텀 이벤트는 dispatchEvent메서드로 디스패치(이벤트를 발생시키는 행위)할 수도 있다.

 

끝.