이벤트
이벤트란 마우스를 오버하거나 키보드를 입력할 때 발생하는 모든 동작을 말합니다. 함수는 조건에 맞으면 실행하지만 이벤트는 이벤트 발생시 실행하는 실행문입니다.
이벤트
자바스크립트에는 다음과 같은 이벤트가 있습니다.
- 애니메이션 이벤트
- 클립보드 이벤트
- 드래그 이벤트
- 포커스 이벤트
- URL 이벤트
- 인풋 이벤트
- 키보드 이벤트
- 마우스 이벤트
- 페이지 전환 이벤트
- PopState 이벤트
- Progress 이벤트
- storage 이벤트
- 터치 이벤트
- 트랜지션 이벤트
- UI 이벤트
- 휠 이벤트
이벤트에서 쓰는 용어
- 이벤트 리스너 : 이벤트 속성에 연결된 함수를 나타냅니다.
- 디폴트 이벤트 : 요소가 가지고 있는 기본적인 이벤트를 나타냅니다.
- 이벤트 모델 : 이벤트를 연결하는 방법을 나타냅니다.
Mouse Event
| 종류 | 설명 |
|---|---|
| altKey | |
| button | |
| buttons | |
| clientX | |
| clientY | |
| ctrlKey | |
| getModifierState() | |
| metaKey | |
| movementX | |
| movementY | |
| offsetX | |
| offsetY | |
| pageX | |
| pageY | |
| relatedTarget | |
| screenX | |
| screenY | |
| shiftKey | |
| which |
이벤트 속성
| 종류 | 설명 |
|---|---|
| abort | 이미지 다운로드이 중단되는 경우 이벤트가 발생합니다. |
| activate | 객체가 활성화될 때(태그 기능이 동작할 때) 호출 |
| afterprint | 웹 페이지 인쇄가 시작되거나 인쇄 대화 상자가 닫힌 경우 이벤트가 발생합니다. |
| afterupdate | 데이터 객체 내의 데이터가 업데이트 되었을 때 호출 |
| animationend | 애니메이션이 완료되었을 때 이벤트가 발생합니다. |
| animationiteration | 애니메이션이 반복될 때 이벤트가 발생합니다. |
| animationstart | 애니메이션이 시작될 때 때 이벤트가 발생합니다. |
| beforeactivate | 객체가 활성화되기 직전에 호출 |
| beforecopy | 선택 영역이 클립보드로 복사되기 직전에 호출 |
| beforecut | 선택 영역이 클립보드로 잘라내지기 직전에 호출 |
| beforedeactivate | 웹 문서상에서 현재 객체에서 다른 객체로 activeElement가 변경될 때 호출 |
| beforeeditfocus | 편집 가능한 객체 내부에 포함된 객체의 편집 모드가 활성화될 때 호출 |
| beforepaste | 클립보드에서 문서로 붙여넣기를 할 때 대상 객체에서 호출 |
| beforeprint | 웹 문서가 출력되기 직전에(또는 미리보기를 실행하기 직전에) 호출 |
| beforeunload | 웹 문서가 업로드 되기 직전에 이벤트가 발생합니다. |
| beforeupdate | 데이터 객체 내의 데이터가 업데이트 되기 직전에 호출 |
| blur | 요소가 포커스를 잃었을 때 이벤트가 발생합니다. |
| bounce | marquee 객체의 스크롤 영역 양쪽 끝에서 바운드 될 때 호출 |
| canplay | 브라우저가 미디어 재생을 시작할 수 있을 때 이벤트가 발생합니다. |
| cellchange | 데이터 객체에서 데이터가 변경될 때 호출 |
| change | 폼 요소 또는 선택 영역의 내용이 변경될 때 이벤트가 발생하 니다. |
| click | 요소 위에 마우스를 클릭할 때 이벤트가 발생합니다. |
| contextmenu | 마우스 오른쪽 버튼을 눌러 팝업 메뉴를 띄울 때 이벤트가 발생합니다. |
| controlselect | 사용자가 객체의 제어 영역을 선택할 때 호출 |
| copy | 사용자가 컨텐츠의 요소를 복사할 때 이벤트가 발생합니다. |
| cut | 사용자가 컨텐츠의 요소를 잘라내기 했을 때 이벤트가 발생합니다. |
| dblclick | 요소를 더블클릭했을 때 이벤트가 발생합니다. |
| deactivate | 웹 문서의 현재 선택된 객체에서 다른 객체로 activeDlement가 변할 때 호출 |
| drag | 요소를 드래그 할 때 이벤트가 발생합니다. |
| dragend | 요스를 드래그하고 끝날 때 이벤트가 발생합니다. |
| dragenter | 요소를 드래그하는 동안 이벤트가 발생합니다. |
| dragleave | 요소를 드래그하고 요소를 벗어났을 때 이벤트가 발생합니다. |
| dragover | 드래그 가능 영역에서 드래그 할 때 이벤트가 발생합니다. |
| dsragstart | 드래그 가능 영역에서 드래그를 시작할 때 이벤트가 발생합니다. |
| drop | 드래그를 하다가 타겟 영역에 드롭하였을 때 이벤트가 발생합니다. |
| durationchange | 미디어가 변경돼었을 때 이벤트가 발생합니다. |
| ended | 미디어가 끝날 때 이벤트가 발생합니다. |
| error | 웹 문서 내에서 스크립트 에러가 발생할 때 호출 |
| focus | 요소에 포커스 상태가 되었을 때 이벤트가 발생합니다. |
| focusin | 요소에 포커스가 되기 직전에 이벤트가 발생합니다. |
| focusout | 요소에 포커스가 다른 요소로 이동할 때 이벤트가 발생합니다. |
| fullscreenchange | 전체화면 모드로 표시할 수 없는 경우 이벤트가 발생합니다. |
| hashchange | URL의 앵커가 변경되어 있을 때 이벤트가 발생합니다. |
| help | 브라우저에서 F1 키를 눌렀을 때 이벤트가 발생합니다. |
| input | 사용자가 input 요소를 눌렀을 때 이벤트가 발생합니다. |
| invalid | 요소가 유효하지 않는 경우 이벤트가 발생합니다. |
| keydown> | 사용자가 키를 눌렀을 때 이벤트가 발생합니다. |
| keypress | 사용자가 기능 키를 제외한 키를 눌렀을 때 이벤트가 발생합니다. |
| keyup | 사용자가 키를 눌렀다가 떼었을 때 이벤트가 발생합니다. |
| load | 브라우저가 로딩한 다음 이벤트가 발생합니다. |
| loadeddata | 미디어 데이터가 로딩될 때 이벤트가 발생합니다. |
| loadedmetadata | 미디어 메타 데이터가 로딩될 때 이벤트가 발생합니다. |
| loadstart | 브라우저가 미디어를 찾기 시작할 때 이벤트가 발생합니다. |
| message | 이벤트 소스를 통해서 메세지를 전송할 때 이벤트가 발생합니다. |
| mousedown | 요소 위에서 마우스 버튼을 클릭할 때 이벤트가 발생합니다. |
| mouseenter | 요소 영역에 마우스 포인터가 들어올 때 이벤트가 발생합니다. |
| mouseleave | 요소 영역 밖으로 마우스 포인터가 이동할 때 이벤트가 발생합니다. |
| mousemove | 요소 영역 내에서 마우스 포인터가 움직일 때 이벤트가 발생합니다. |
| mouseout | 요소 영역 밖으로 마우스 포인터가 빠져나갈 때 이벤트가 발생합니다. |
| mouseover | 요소 영역으로 마우스 포인터가 들어올 때 이벤트가 발생합니다. |
| mouseup | 요소 위에서 마우스 버튼을 눌렀다가 떼었을 때 이벤트가 발생합니다. |
| mousewheel | 마우스 휠로 조정할 때 이벤트가 발생합니다.(없어짐) |
| offline | 브라우저가 오프라인 작업을 시작하면 이벤트가 발생합니다 |
| online | 브라우저가 온라인 작업을 시작하면 이벤트가 발생합니다. |
| open | 이벤트 소스와 연결될 때 이벤트가 발생합니다. |
| pagehide | 사용자가 웹 페이지에서 떠날 때 이벤트가 발생합니다. |
| pageshow | 사용자가 웹 페이지로 새로 이동할 때 이벤트가 발생합니다. |
| paste | 사용자가 요소를 붙여넣기 할 때 이벤트가 발생합니다. |
| pause | 사용자가 미디어를 정지할 때 이벤트가 발생합니다. |
| playing | 사용자가 미디어를 시작할 때 이벤트가 발생합니다. |
| popstate | 사용자가 윈도우 창을 변경 할 때 이벤트가 발생합니다. |
| progress | 브라우저가 미디어 데이터를 다운로드 중 일때 이벤트가 발생합니다. |
| ratechange | 미디어의 재생 속도가 변경 될 때 이벤트가 발생합니다. |
| resize | 문서의 크기가 변경될 때 이벤트가 발생합니다. |
| reset | 사용자가 폼을 리셋할 때 이벤트가 발생합니다. |
| resizeend | 사용자가 객체의 크기 변경을 끝낼 때 호출 |
| resizestart | 사용자가 객체의 크기변경을 시작할 때 호출 |
| rowenter | 데이터 소스 내에서 현재 열이 변경되거나 객체에 새로운 데이터가 추가될 때 호출 |
| rowexit | 데이터 소스 컨트롤이 객체 내의 현재 열을 변경시킬 때 호출 |
| rowsdelete | 현재 레코드셋에 열이 삭제될 때 호출 |
| rowsinserted | 현재 레코드셋에 새로운 열리 추가될 때 호출 |
| scroll | 사용자가 스크롤 할 때 이벤트가 발생합니다. |
| search | 사용자가 검색 차에서 검색할 때 이벤트가 발생합니다. |
| seeked | 미디어에서 이동 및 건너뛰기가 끝났을 때 이벤트가 발생합니다. |
| seeking | 미디어에서 이동 및 건너뛰기가 시작할 때 이벤트가 발생합니다. |
| select | 선택 영역이 변경될 때 이벤트가 발생합니다. |
| show | 메뉴 요소가 표실될 때 이벤트가 발생합니다. |
| stalled | 미디어 데이터를 가져오려고 시도 했지만 가져올 수 없는 경우에 이벤트가 발생합니다. |
| storage | 웹 저장소의 영역이 업데이트 될 때 이벤트가 발생합니다. |
| submit | 폼 양식이 전송되기 직전에 이벤트가 발생합니다. |
| suspend | 브라우저가 의도적으로 미디어 데이터를 가져오지 않을 때 이벤트가 발생합니다. |
| timeupdate | 재생 위치가 변경될 때 이벤트가 발생합니다. |
| toggle | <details> 요소를 열거나 닫을 때 이벤트가 발생합니다. |
| touchcancel | 터치가 중단되면 이벤트가 발생합니다. |
| touchend | 손가락이 터치 스크린에서 제거 될 때 이벤트가 발생합니다. |
| touchend | 손가락이 터치 스크린에서 제거 될 때 이벤트가 발생합니다. |
| touchmove | 스크린에서 손가락을 드래그 하고 있을 때 이벤트가 발생합니다. |
| touchstart | 스크린에서 손가락이 드래그 시작할 때 이벤트가 발생합니다. |
| transitionend | CSS transitio이 완료되면 이벤트가 발생합니다. |
| unload | 페이지가 로드되지 않으면 이벤트가 발생합니다. |
| volumechange | 미디어의 볼륨이 변경되었을 때 이벤트가 발생합니다. |
| waiting | 미디어의 버퍼링을 위해 일시 중지한 경우 이벤트가 발생합니다. |
| wheel | 마우스 휠을 올릴거나 내일때 이벤트가 발생합니다. |
