18.10.2 이벤트 카테고리

MDN에는 뛰어난 모든 DOM 이벤트를 그룹으로 구별한 훌륭한 문서가 있습니다.
다음은 널리 쓰이는 이벤트 카테고리 일부입니다.

드래그 이벤트

dragstart, drag, dragend, drop 등의 이벤트를 통해 드래그 앤 드롭 인터페이스를 만들 수 있습니다.

포커스 이벤트

사용자가 폼 필드 같은 편집 가능한 요소를 조작하려 할 때 반응할 수 있습니다.
사용자가 입력 필드를 클릭하거나, 탭을 누르거나, 터치하는 등 필드에 ‘들어갈 때’ focus 이벤트가 발생하고, 다른 곳을 클릭하거나, 탭을 다시 누르거나, 다른 곳을 터치해서 필드에서 ‘나올 때’ blur 이벤트가 발생합니다.
사용자가 필드의 내용을 바꿀 때는 change 이벤트가 발생합니다.

폼 이벤트

사용자가 전송 버튼을 클릭하거나, 적절한 위치에서 엔터를 눌러 폼을 전송하면 submit 이벤트가 발생합니다.

입력 장치 이벤트

click 이벤트는 이미 봤지만, 마우스 이벤트에는 그 외에도 mousedown, move, mouseup, mouseenter, mouseleave, mouseover, mousewheel 이벤트가 있습니다.
키보드에는 keydown, keypress, keyup 이벤트가 있습니다.
터치 장치의 터치 이벤트는 마우스 이벤트보다 우선합니다.
터치 이벤트를 처리하지 않으면 마우스 이벤트가 발생합니다.
예를 들어 사용자가 버튼을 터치했을 때 터치 이벤트에 등록된 핸들러가 없다면 클릭 이벤트가 발생합니다.

미디어 이벤트

HTML5 비디오, 오디오 플레이어에 관련된 이벤트로 pause, play 등이 있습니다.

진행(progress) 이벤트

브라우저가 컨텐츠를 불러오는 과정에서 발생합니다.
가장 널리 쓰이는 것은 브라우저가 요소와 그에 연관된 자원을 모두 불러왔을 때 발생하는 load 이벤트입니다.
error 이벤트도 유용하게 쓸 수 있습니다.
자원을 사용할 수 없을 때, 예를 들어 이미지 링크가 깨졌을 때 error 이벤트를 통해 적절히 대응할 수 있습니다.

터치 이벤트

터치 이벤트는 장치 터치를 사용할 수 있는 장치를 세밀히 지원합니다.
이벤트의 touches 프로퍼티를 통해 동시 터치를 지원하고, 핀치, 스와이프 같은 제스처를 비롯해 세밀한 터치 처리를 가능하게 합니다.