티스토리 뷰

Web 개발/자바스크립트

JavaScript | Event Type(이벤트 타입)

최입동 2021. 5. 31. 09:00
320x100

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.
문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다.

 

프론트엔드 개발자를 위한 자바스크립트 프로그래밍(일명 노란책)을 공부하고 정리한 내용입니다.

DOM 표준를 기준으로 2021.05.26에 작성된 글로 Deprecated라고 쓰여 있어도 대체로 브라우저에서는 동작합니다.

1. UI 이벤트

사용자 인터페이스에서 트리거 된 이벤트

  • load: 리소스(document, images, style sheets, scripts etc.)의 로드가 끝났을 때 발생.
  • unload: 리소스(document, images, style sheets, scripts etc.)가 DOM에서 제거될 때 발생.
    • unload는 모든 것이 해제될 때 발생하므로 해당 이벤트 리스너에서 DOM 노드의 위치나 외형 조작 시 에러가 발생할 수 있음.
    • 일반적으로 페이지가 다른 페이지로 이동할 때 참조를 제거하여 메모리 누수를 방지하는 목적으로 사용.
  • abort: 리소스의 로드가 (사용자의 취소 등으로) 중단되었을 때 발생.
  • error: 리소스의 로드가 실패했을 때, 혹은 리소스가 로드되었으나 해석할 수 없을 때(잘못된 형식, 유효하지 않은 이미지) 발생.
  • select: 사용자가 일부 텍스트를 선택할 때 발생.

2. Focus 이벤트

요소가 포커스를 얻거나 놓칠 때 발생하는 이벤트 [참고]

  • blur: 요소가 포커스를 잃을 때 발생. 버블링 x.
  • focus: 요소가 포커스를 받을 때 발생. 버블링 x.
  • focusout: 요소가 포커스를 잃을 때 발생.
  • focusin: 요소가 포커스를 받을 때 발생.

3. Mouse 이벤트와 Wheel 이벤트

Mouse 이벤트 [참고]

  • auxclick: 요소를 non-primary button으로 클릭할 때 발생.
  • click: 요소를 primary button으로 클릭할 때 발생.
  • dblclick: 요소를 primary button으로 더블 클릭할 때 발생.
  • mousedown: 요소 위로 마우스를 누를 때 발생.
  • mouseup: 요소 위에 있는 마우스를 놓을 때 발생.
  • mouseenter: 포인터가 요소 위로 이동될 때 발생. 버블링 x.
  • mouseleave: 포인터가 요소 밖으로 이동될 때 발생. 버블링 x.
  • mousemove: 포인터가 요소 위에 있으면서 이동 중일 때 발생.
  • mouseover: 포인터가 요소 안(하위 요소에서 오는 경우 포함)으로 이동될 때 발생.
  • mouseout: 포인터가 요소 밖(하위 요소로 가는 경우 포함)으로 이동될 때 발생.

MouseEvent 특수 프로퍼티

Mouse 좌표

  • screenX, screenY: 사용자 모니터 화면 기준.
  • pageX, pageY Experimental: 전체 문서 기준.
  • clientX, clientY: 브라우저에서 보이는 영역 기준.
  • offsetX, offsetY Experimental: 해당 노드(의 border) 기준.

Keyboard 키

특정 키가 눌렸는지 여부를 나타내며 default값은 false.

readonly attribute boolean ctrlKey;
readonly attribute boolean shiftKey;
readonly attribute boolean altKey;
readonly attribute boolean metaKey;

Mouse 버튼

어떤 버튼이 눌렸는지를 나타내는 속성으로 mousedown과 mouseup과 관련됨.

readonly attribute short button;
readonly attribute unsigned short buttons;

button 값 의미

  • 0: primary button(in general, the left button)
  • 1: auxiliary button(in general, the middle button)
  • 2: secondary button(ingeneral, the right button)
  • 3: X1 (back) button
  • 4: X2 (forward) button

buttons 값 의미: 값의 조합(비트 연산과 유사)으로 의미 표시

  • 0: no button is currently active
  • 1: primary button
  • 2: secondary button
  • 4: auxiliary button

relatedTarget

이벤트를 발생 시킨 요소와 관련된 요소를 반환. 대상 요소는 이벤트마다 다르게 정의된다.

tab key로 포커스가 이동되는 등 마우스나 커서의 대상이 변경되는 동작에서 활용할 수 있다.

[MouseEvent.relatedTarget 참고] [FocusEvent.relaetedTarget 참고]

Wheel 이벤트

  • wheel: 마우스 휠이 요소 위에서 롤 업 혹은 롤 다운될 때(스크롤 혹은 줌) 발생.

4. Keyboard 이벤트와 Input 이벤트

Keyboard 이벤트 [참고]

  • keyup: 사용자가 키를 놓을 때 발생.
  • keydown: 사용자가 키를 누르고 있을 때 발생. 누르고 있으면 계속 발생.
  • keypress Deprecated: 사용자가 키를 누를 때 발생. 처음 누를 때만 발생. character value를 누를 때만 발생.

KeyboardEvent 특수 프로퍼티 

// location 값 표현에 사용
const unsigned long DOM_KEY_LOCATION_STANDARD = 0x00; 
const unsigned long DOM_KEY_LOCATION_LEFT = 0x01; 
const unsigned long DOM_KEY_LOCATION_RIGHT = 0x02; 
const unsigned long DOM_KEY_LOCATION_NUMPAD = 0x03; 

readonly attribute DOMString key; 
readonly attribute DOMString code; 
readonly attribute unsigned long location; 

// MouseEvent의 프로퍼티와 동일하게 해당 키가 눌렸는지 여부를 나타냄
readonly attribute boolean ctrlKey; 
readonly attribute boolean shiftKey; 
readonly attribute boolean altKey; 
readonly attribute boolean metaKey;
  • key: 사용자의 현재 로케일 설정, 한정자 상태 및 키보드 배열 재정의 등을 고려하여 사용자가 입력한 문자에 해당하는 키.
  • code: 물리적으로 눌린 키. 자판 배열이나 수정자 상태에 영향받지 않음.
  • location: 키의 논리적 위치.
  • charCode Deprecated: keypress 이벤트에서 눌린 키의 Unicode 값.
  • keyCode Deprecated: 시스템이나 구현에 의존하는 숫자 코드에 의해 정의된 값.

Input 이벤트 [참고]

  • beforeinput: 사용자가 키를 누를 때 발생(only for keys which produce a character value).
  • input: 사용자가 키를 누를 때 발생(only for keys which have updated the DOM). ex) back space key로 글자가 지워지면 호출, 지워질 글자가 없으면 호출되지 않음.
  • textInput Deprecated: 편집 가능한 영역에 문자가 입력될 때 발생.

5. Composition 이벤트

IME에 사용되는 복잡한 입력을 처리하는 이벤트. 한글과 같이 여러 키를 눌러 문자 하나를 조합하는 경우 발생. [Test]

  • compositionstart: IME와 같은 텍스트 컴포지션 시스템이 새로운 컴포지션 세션을 시작할 때 발생.
  • compositionupdate: IME와 같은 텍스트 컴포지션 시스템에 의해 제어되는 텍스트 컴포지션의 컨텍스트에서 새로운 문자가 수신될 때 발생.
  • compositionend: IME와 같은 텍스트 컴포지션 시스템이 현재 컴포지션 세션을 완료하거나 취소할 때 발생.

6. Mutation 이벤트 Deprecated (MutationObserver로 대체됨)

DOM level 2에서 DOM의 일부가 바뀌었음을 알리는 이벤트

  • DOMAttrModified: 속성이 어떻게든 바뀌었을 때 발생.
  • DOMChracterDataModified: 텍스트 노드의 값이 바뀔 때 발생.
  • DOMNodeInserted: 노드가 다른 노드의 자식으로 삽입될 때 발생.
  • DOMNodeInsertedIntoDocument: 노드가 직접적으로, 또는 자신이 존재하는 서브트리를 통해 삽입됐을 때 발생.
  • DOMNodeRemoved: 노드가 부모 노드로부터 제거될 때 발생.
  • DOMNodeRemovedFromDocument: 노드가 직접적으로, 또는 자신이 존재하는 서브트리르 통해 제거되었을 때 발생.
  • DOMSubtreeModifed: DOM 구조가 바뀌었을 때 발생.

7. HTML5 이벤트 [참고]

  • resize: document view가 resize될 때 발생. window에서만 발생.
  • scroll: document view나 element가 스크롤될 때 발생.
  • contextmenu: right-click 시 발생. MouseEvent로 간주됨.
  • beforeunload: 페이지가 막 unload 되려고 할 때 window에서 발생. 페이지를 떠나지 못하게 막거나 경고 메시지를 보여주기 위한 용도.
  • DOMContentLoaded: DOM 트리가 완전히 구성되는 즉시 발생. 이미지, JS 파일, CSS 파일 등 기타 자원이 로드되는 것과 무관하게 발생(load 이벤트와 다른 점). document와 window에 등록 가능.
  • readystatechange: document의 readyState 속성이 변경될 때 발생.
    • loading: document 로딩 중.
    • interactive: document가 로딩과 파싱을 끝냈으나 서브 리소스(scripts, images, stylesheets etc.)는 아직 로딩 중.
    • complete: document와 모든 서브 리소스 로딩 완료(이제 load 이벤트가 불릴 예정).
  • pageshow: 세션 기록에 현재 페이지가 있을 때, 탐색으로 현재 문서 표시할 때 발생(bfcache 여부와 무관).
  • pagehide: 세션 기록에 현재 페이지가 있을 때, 탐색으로 문서에서 벗어날 때 발생. 안정적으로 실행되지 않을 수 있음.
  • hashchange: URL 해시(#)가 바뀔 때 실행. window에 등록 가능.
  • 번외) visibilitychange: 브라우저 탭의 컨텐츠가 visible 또는 hidden 상태로 변화할 때 발생(tab 이동시에도 발생). - pagehide가 불안정하므로 이 이벤트를 사용할 것을 권장함. [참고]

8. DeviceOrientation 이벤트 [참고]

  • deviceorientation: 장치 방향에 중요한 변화가 발생할 때 발생.
  • deviceemotion: 장치가 이동할 때 발생.

9. Touch 이벤트 [참고]

  • touchstart
  • touchend
  • touchmove
  • touchcancel

번외) 브라우저 DOM 지원 확인 방법 Deprecated

  • DOMImplementation.hasFeature(feature, version): 모던 브라우저에서는 항상 true를 반환[참고].
  • Node.isSupported(feature, version): IE9를 제외하곤 아예 지원하지 않음[참고].

번외) script 태그의 async/defer

렌더링 엔진과 자바스크립트 엔진은 직렬적으로 파싱을 수행합니다. 즉, script 태그의 위치에 따라 HTML 파싱이 블락되어 DOM 생성이 지연될 수 있습니다. 이를 해결하기 위해 HTML5에서 script 태그에 async와 defer 속성이 추가되었습니다.

async와 defer는 src 속성을 통해 외부 자바스크립트 파일을 로드하는 경우 사용할 수 있으며, 사용 시 HTML 파싱과 JS 파일 로드가 비동기적으로 동시에 진행됩니다.

async

  • HTML 파싱과 JS 파일 로드가 비동기적으로 진행.
  • JS 파일 로드 완료 직후, 파일 실행. 이때 HMTL 파싱이 중단됨.
  • 파일 실행 순서 보장 안됨.
  • 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우에 적용.

defer

  • HTML 파싱과 JS 파일 로드가 비동기적으로 진행.
  • HTML 파싱 완료 직후, 파일 실행. 파일 실행 완료까지 DOMContentLoaded 이벤트 발생을 막음.
  • 파일 실행 순서 보장됨.
  • DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용.

참고자료

320x100
저작자표시 비영리 (새창열림)

'Web 개발 > 자바스크립트' 카테고리의 다른 글

JavaScript | this 키워드  (0) 2021.06.04
JavaScript | Event 메모리 최적화와 Event 시뮬레이션  (0) 2021.06.02
JavaScript | Event(이벤트)  (0) 2021.05.28
JavaScript | strict mode(스트릭트 모드, 엄격 모드)  (0) 2021.05.24
[JS] 클라이언트 스토리지  (0) 2018.11.21
댓글