[event handler]

event driven programming

이벤트 중심으로 프로그램 흐름을 제어함

 

application 이 특정 이벤트가 발생했을 때 해당 호출 함수를 브라우저에게 알려서 호출을 위임한다.

 

event handler : 이벤트 발생 시 호출 함수

event handler 를 등록하여 이벤트 발생 시 브라우저에게 호출 위임

 

 

 

event type

• 마우스 이벤트
• 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: 리소스 로딩 실패했을 때

 

event handler 등록 방법

1. event handler attribute

- on 접두사 + 이벤트 타입

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

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

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

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

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

2. event handler property

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

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

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

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

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

 

3. addEventListener method

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

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

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

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

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

 

 

event handler remove

EventTarget.prototype.removeEventListener 메서드

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

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

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

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

 

event object

- 이벤트 객체의 상속 구조

• 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 프로퍼티 사용 권장 (입력한 키 값을 문자열로 반환)

 

 

 

event propagation

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

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

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

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

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

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

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

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

 

 

 

event delegation ->> 써봐야지

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

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

- Element.prototype.matches 메서드

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

 

 

DOM 요소의 기본 동작 조작

preventDefault  : DOM 요소의 기본 동작 중단

- DOM 요소의 기본 동작 중단

 

stopPropagation: 이벤트 전파 방지

• 이벤트 전파 중지

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

 

 

event handlr 에 인수 전달

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

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

 

 

custom event

개발자의 의도로 생성된 이벤트

• CustomEvent 이벤트 생성자 함수

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

• 이벤트 생성자 함수로 생성한 커스텀 이벤트는 isTrusted 프로퍼티 값이 언제나 false임
• 커스텀 이벤트가 아닌 사용자의 행위에 의해 발생한 이벤트에 의해 생성된 이벤트 객체는 true임

- 커스텀 이벤트 디스패치

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

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

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