목차
- Event 정의
- Event 구문 - addEventListener 사용 권장
- Event 종류 (abc순)
- Event 속성/메서드 (abc순)
Event 정의
이벤트는 사용자나 서버에 의해 어떤 동작이나 사건이 발생한 경우를 의미.
1.
HTML DOM 이벤트 사용하면 HTML 요소에 JS 실행코드 부착 가능.
2.
이벤트는 주로 함수와 함께 사용되며, 이벤트 발생 전엔 (예 : 사용자가 버튼 클릭) 함수 실행 안 됨.
3.
이벤트명에 on 붙으면 이벤트속성 (= 해당 이벤트 발생 시, 실행코드 실행) 됨.
(예)
- click : 클릭 이벤트명 (= 단순히 클릭하는 행위)
- onclick : 클릭 이벤트속성 (= 클릭하는 행위가 발생한다면, 정의한 실행코드를 실행)
4.
JS 이벤트 참조.
Event 구문 - addEventListener 사용 권장
[HTML]
<element onclick ="myFunction()">
PS.
간단한 script는 실행내용 바로 입력 가능.
<element onclick ="myScript">
[JS]
// 익명함수 (즉, 실행할 내용을 바로 기재.)
object.onclick = function(){...};
// 일반함수 (즉, 실행할 내용을 별도 함수에 정의.)
object.onclick = myFunction;
// EventListener + 일반함수 (즉, 실행할 내용을 별도 함수에 정의.)
object.addEventListener("click", function() {...});
// EventListener + 일반함수 (즉, 실행할 내용을 별도 함수에 정의.)
object.addEventListener("click", myFunction);
</script>
※ addEventListener() 메서드는 IE8 및 그 이전 브라우저는 지원 X.
※ click 이벤트 예제 참고. https://homzzang.com/b/js-1317
Event 종류 (abc순)
[A]
abort
미디어 로드 중단되면 이벤트 발생. UiEvent, Event
afterprint
페이지 인쇄가 시작되거나 인쇄 대화 상자가 닫힌 경우 이벤트 발생. Event
animationend
CSS 애니메이션이 완료하면 이벤트 발생. AnimationEvent
animationiteration
CSS 애니메이션이 반복 될 때 이벤트 발생. AnimationEvent
animationstart
CSS 애니메이션이 시작될 때 이벤트 발생. AnimationEvent
[B]
beforeprint
페이지가 인쇄 될 때 이벤트 발생. event
beforeunload
문서가 언로드되기 전에 이벤트 발생. UiEvent, Event
blur
요소가 포커스를 잃을 때 이벤트 발생. FocusEvent
[C]
canplay
브라우저가 미디어 재생을 시작할 수있 을 때 이벤트 발생 (시작하기에 충분할 정도로 버퍼링 된 경우). event
canplaythrough
버퍼링 중지하지 않고 브라우저가 미디어 통해 재생할 수 있을 때 이벤트 발생. event
change
form 요소, select 항목 또는 checked 상태의 내용 변경되었을 때 이벤트 발생. event
(예: <input>, <select> , <textarea>경우)
click
사용자가 요소 클릭하면 이벤트 발생. MouseEvent
contextmenu
사용자가 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열 때 이벤트 발생. MouseEvent
copy
사용자가 요소 내용 복사 할 때 이벤트 발생. ClipboardEvent
cut
사용자가 요소 내용 자를 때 이벤트 발생. ClipboardEvent
[D]
dblclick
사용자가 요소를 두 번 클릭하면 이벤트 발생. MouseEvent
drag
요소가 드래그되고있을 때 이벤트 발생. DragEvent
dragend
사용자가 요소 드래그 끝내면 이벤트 발생. DragEvent
dragenter
드래그 된 요소가 드롭 대상에 들어갈 때 이벤트 발생. DragEvent
dragleave
드래그 된 요소가 드롭 타겟을 떠날 때 이벤트 발생. DragEvent
dragover
드래그 된 요소가 드롭 대상 위에 있을 때 이벤트 발생. DragEvent
dragstart
사용자가 요소를 드래그하기 시작하면 이벤트 발생. DragEvent
drop
드래그 된 요소가 드롭 대상에 드롭 될 때 이벤트 발생. DragEvent
durationchange
미디어 지속 시간이 변경되면 이벤트 발생. event
[E]
ended
미디어가 마지막에 도달하면 이벤트 발생 ( "감사합니다"와 같은 메시지에 유용) event
error
외부 파일 로드하는 중에 오류 발생하면 이벤트 발생. ProgressEvent, UiEvent, Event
[F]
focus
요소가 포커스 가져올 때 이벤트 발생. FocusEvent
focusin
요소가 포커스 얻으려고 할 때 이벤트 발생. FocusEvent
focusout
요소가 포커스 잃을 때 이벤트 발생. FocusEvent
fullscreenchange
요소가 전체 화면 모드로 표시 될 때 이벤트 발생. 이벤트
fullscreenerror
요소가 전체 화면 모드로 표시 될 수없는 경우 이벤트 발생. 이벤트
[H]
hashchange
URL 엥커 부분에 변경 있을 때 이벤트 발생. HashChangeEvent
[I]
input
요소가 사용자 입력 받을 때 이벤트 발생. InputEvent, Event
invalid
요소가 유효하지 않은 경우 이벤트 발생. Event
[K]
keydown
사용자가 키를 누를 때 이벤트 발생. KeyboardEvent
keypress
사용자가 키 누를 때 이벤트 발생. KeyboardEvent
keyup
사용자가 키 놓을 때 이벤트 발생. KeyboardEvent
[L]
load
객체가 로드 할 때 이벤트 발생. UiEvent, Event
loadeddata
미디어 데이터가 로드 될 때 이벤트 발생. Event
loadedmetadata
메타 데이터 (크기 및 기간과 같은)가 로드 될 때 이벤트 발생. Event
loadstart
브라우저가 지정된 미디어 찾기 시작할 때 이벤트 발생. ProgressEvent
[M]
message
이벤트 소스 통해 메시지 수신 될 때 이벤트 발생. Event
mousedown
사용자가 요소 위에서 마우스 단추 누를 때 이벤트 발생. MouseEvent
mouseenter
마우스커서가 요소 위로 이동하면 이벤트 발생. MouseEvent
mouseleave
마우스커서가 요소 밖으로 이동하면 이벤트 발생. MouseEvent
mousemove
마우스커서가 요소 위에 있을 때 이벤트 발생. MouseEvent
mouseover
마우스커서가 요소 위로 이동하거나 해당 자식 중 하나 위로 이동하면 이벤트 발생. MouseEvent
mouseout
마우스커서를 해당 요소나 그 자식요소 중 하나의 밖 이동하면 이벤트 발생. MouseEvent
mouseup
마우스버튼을 요소 위에서 떼어 놓았을 때 이벤트 발생. MouseEvent
mousewheel
폐기예고. 대신 wheel 이벤트 사용. MouseEvent
[O]
offline
브라우저가 오프라인으로 작업 시작하면 이벤트 발생. Event
online
브라우저가 온라인으로 작업 시작할 때 이벤트 발생. Event
open
이벤트 소스와의 연결 열릴 때 이벤트 발생. Event
[P]
pagehide
사용자가 웹 페이지에서 벗어날 때 이벤트 발생. PageTransitionEvent
pageshow
사용자가 웹 페이지로 이동할 때 이벤트 발생. PageTransitionEvent
paste
사용자가 요소에 일부 내용 붙여 넣을 때 발생. ClipboardEvent
pause
사용자나 프로그램이 미디어를 일시중지 시킬 때 이벤트 발생. Event
play
미디어가 시작되었거나 더 이상 일시중지 되지 않은 경우 이벤트 발생. Event
playing
버퍼링 위해 일시 중지되거나 중지 된 후 미디어가 재생 중일 때 이벤트 발생. Event
popstate
윈도우 히스토리 변경되면 이벤트 발생. PopStateEvent
progress
브라우저가 미디어 데이터 가져 오는 중이거나 미디어 다운 중일 때 이벤트 발생. Event
[R]
ratechange
미디어의 재생 속도가 변경 될 때 이벤트 발생. Event
resize
문서 뷰의 크기가 변경 될 때 이벤트 발생. UiEvent, Event
reset
양식이 재설정 될 때 이벤트 발생. Event
[S]
scroll
요소 스크롤 막대가 스크롤 될 때 이벤트 발생. UiEvent, Event
search
사용자가 검색 필드 (<input = "search">)에 뭔가 쓸 때 이벤트 발생. Event
seeked
사용자가 미디어의 새 위치로 이동 / 건너뛰기 마칠 때 이벤트 발생. Event
seeking
사용자가 미디어 이벤트의 새 위치로 이동 / 건너 뛰기 시작할 때 이벤트 발생. Event
select
<input> 및 <textarea> 요소에서 사용자가 () 일부 텍스트 선택 후 이벤트 발생. UiEvent, Event
show
<menu> 요소가 컨텍스트 메뉴로 표시 될 때 이벤트 발생. Event
stalled
브라우저가 미디어 데이터 가져 오려 하지만 데이터 사용할 수없는 경우 이벤트 발생. Event
storage
웹 저장소 영역이 업데이트 될 때 이벤트 발생. StorageEvent
submit
폼이 전송될 때 이벤트 발생. Event
suspend
브라우저가 의도적으로 미디어 데이터를 가져 오지 않을 때 이벤트 발생. Event
[T]
timeupdate
재생 위치가 변경되면 (예 : 사용자가 미디어의 다른 지점으로 빨리감기 할 때) 이벤트 발생. Event
toggle
사용자가 <details> 요소 이벤트를 열거나 닫을 때 이벤트 발생. Event
touchcancel
터치 중단되면 이벤트 발생. TouchEvent
touchend
스크린에서 손가락 떼면 이벤트 발생. TouchEvent
touchmove
손가락이 화면에서 드래그되면 이벤트 발생. TouchEvent
touchstart
터치 스크린에 손가락을 대면 이벤트 발생. TouchEvent
transitionend
CSS 전환 완료 될 때 이벤트 발생. TransitionEvent
[U]
unload
페이지가 언로드 된 후 이벤트 발생 (<body> 경우). UiEvent, Event
[V]
volumechange
미디어 볼륨이 변경되면 이벤트 발생 (볼륨을 "음소거"로 설정하는 것을 포함) Event
[W]
waiting
미디어가 일시 중지되었지만 미디어가 일시 중지되어 더 많은 데이터를 버퍼링하는 경우와 같이 다시 시작해야 할 때 이벤트 발생. Event
wheel
마우스휠을 요소 위에서 올리거나 내릴 때 이벤트 발생. WheelEvent
Event 속성/메서드 (abc순)
[A]
AltKey
마우스 이벤트 촉발되었을 때 "Alt"키가 눌려졌는지 여부 반환. MouseEvent
altKey
키 이벤트 촉발되었을 때 "ALT"키가 눌려 졌는지 여부 반환. KeyboardEvent, TouchEvent
animationName
애니메이션 이름 반환. AnimationEvent
[B]
bubbles
특정 이벤트가 버블 링 이벤트인지 여부 반환. Event
button
마우스 이벤트가 촉발되었을 때 어느 마우스 버튼이 눌렸는지 반환. MouseEvent
buttons
마우스 이벤트가 촉발되었을 때 어느 마우스 버튼들이 눌렸는지 반환. MouseEvent
[C]
cancelable
이벤트 기본 동작이 금지될 수 있는지 여부 반환. Event
charCode
onkeypress 이벤트 촉발한 키의 유니 코드 문자 코드 반환. KeyboardEvent
changeTouches
이전 터치와 현재 터치 사이에서 상태가 변경된 모든 터치 객체의 목록 반환. TouchEvent
clientX
마우스 이벤트 촉발되었을 때 현재 윈도우 기준으로 마우스커서의 가로 좌표 반환. MouseEvent, TouchEvent
clientY
마우스 이벤트 트리거되었을 때 현재 윈도우 기준으로 마우스커서의 수직 좌표 반환. MouseEvent, TouchEvent
clipboardData
clipboard 작업의 영향 받는 데이터가 들어있는 객체 반환. ClipboardData
code
이벤트를 촉발한 키의 코드 반환. KeyboardEvent
composed
이벤트가 작성되었는지 여부 반환. Event
createEvent()
새 이벤트 생성. Event
ctrlKey
마우스 이벤트가 촉발될 때 "CTRL"키가 눌려 졌는지 여부 반환. MouseEvent
ctrlKey
키 이벤트가 촉발될 때 "CTRL"키가 눌려 졌는지 여부 반환. KeyboardEvent, TouchEvent
currentTarget
이벤트를 촉발시킨 이벤트 리스너가진 요소 반환. Event
[D]
data
삽입된 문자 반환. InputEvent
dataTransfer
(드래그/드롭)된 또는 (삽입/삭제)된 데이터 포함한 객체 반환. DragEvent, InputEvent
defaultPrevented
preventDefault () 메서드가 이벤트에 대해 호출되었는지 여부 반환. Event
deltaX
마우스 휠 (X 축)의 가로 스크롤 량을 반환. WheelEvent
deltaY
마우스 휠의 세로 스크롤 량 (y 축) 반환. WheelEvent
deltaZ
z 축의 마우스 휠 스크롤 양 반환. WheelEvent
deltaMode
델타 값 (픽셀, 선 또는 페이지)에 대한 측정 단위를 나타내는 숫자 반환. WheelEvent
detail
마우스 클릭횟수 반환. UiEvent
[E]
elapsedTime
애니메이션이 실행된 시간 (초) 반환. AnimationEvent
elapsedTime
트랜지션이 실행된 시간 (초) 반환. TransitionEvent
eventPhase
현재 평가 중인 이벤트 흐름의 단계 반환. Event
[G]
getTargetRanges()
삽입 / 삭제에 의해 영향 받는 타겟 범위 포함한 배열 반환. InputEvent
getModifierState()
지정된 키가 활성화되면 true 반환. KeyboardEvent.
[I]
inputType
변경 유형 (예 : '삽입'또는 '삭제') 반환. InputEvent
isComposing
이벤트 상태가 작성 중인지 아닌지 반환. InputEvent, KeyboardEvent
isTrusted
이벤트가 신뢰할 수 있는지 여부 반환. Event
[K]
key
이벤트가 나타내는 키의 키 값 반환. KeyboardEvent
key
변경된 저장 항목의 키 반환. StorageEvent
keyCode
onkeypress 이벤트를 촉발한 키의 유니코드 문자코드 또는 onkeydown 또는 onkeyup 이벤트를 촉발한 키의 유니코드 키코드를 반환. KeyboardEvent
[L]
location
키보드 또는 장치에 있는 키의 위치 반환. KeyboardEvent
lengthComputable
진행 상황의 길이를 계산할 수 있는지 여부 반환. ProgressEvent
loaded
로드 된 작업량 반환. ProgressEvent
[M]
metaKey
이벤트가 촉발 되었을 때 "META"키가 눌렸는지 여부 반환. MouseEvent
metaKey
키 이벤트가 촉발되었을 때 "META"키가 눌렸는지 여부 반환. KeyboardEvent, TouchEvent
MovementX
마지막 mousemove 이벤트의 위치를 기준으로 마우스커서의 수평 좌표 반환. MouseEvent
MovementY
마지막 mousemove 이벤트의 위치를 기준으로 마우스커서의 수직좌표 반환. MouseEvent
[N]
newValue
변경된 저장소 항목의 새 값 반환. StorageEvent
newURL
해시가 변경된 후 문서의 URL 반환. HasChangeEvent
[O]
offsetX
대상 요소의 가장자리 위치를 기준으로 마우스 포인터의 가로 좌표 반환. MouseEvent
offsetY
대상 요소의 가장자리 위치를 기준으로 마우스 포인터의 세로 좌표 반환. MouseEvent
oldValue
변경된 저장소 항목의 이전 값을 반환. StorageEvent
oldURL
해시가 변경되기 전에 문서의 URL 반환. HasChangeEvent
onemptied
이벤트가 잘못되어 미디어 파일이 갑자기 사용할 수없는 경우 (예기치 않게 연결이 끊어지는 등) 이벤트 발생.
[P]
pageX
마우스 이벤트가 촉발되었을 때 문서 기준으로 마우스커서의 수평 좌표 반환. MouseEvent
pageY
마우스 이벤트가 촉발되었을 때 문서 기준으로 마우스커서의 세로 좌표 반환. MouseEvent
persisted
웹페이지가 브라우저에 의해 캐시되었는지 여부 반환. PageTransitionEvent
preventDefault()
이벤트가 취소 가능한 경우, 이벤트 기본 작동 취소. Event
propertyName
애니메이션 또는 트랜지션과 연관된 CSS 속성 이름 반환. AnimationEvent, TransitionEvent
pseudoElement
애니메이션 또는 트랜지션의 유사 요소 이름 반환. AnimationEvent, TransitionEvent
[R]
region
지역 MouseEvent
relatedTarget
마우스 이벤트를 촉발한 요소와 관련된 요소 반환. MouseEvent
relatedTarget
이벤트를 촉발한 요소와 관련된 요소 반환. FocusEvent
repeat
키가 반복적으로 눌리는지아닌지 여부 반환. KeyboardEvent
[S]
screenX
이벤트가 촉발되었을 때 화면 기준으로 마우스커서의 수평좌표 반환. MouseEvent
screenY
이벤트 촉발거되었을 때 화면 기준으로 마우스커서의 수직좌표 반환. MouseEvent
shiftKey
이벤트가 촉발되었을 때 "SHIFT"키가 눌렸는지 여부 반환. MouseEvent
shiftKey
키 이벤트가 촉발되었을 때 "SHIFT"키가 눌렸는지 여부 반환. KeyboardEvent, TouchEvent
state
히스토리 항목의 복사본을 포함하는 객체를 반환. PopStateEvent
stopImmediatePropagation()
같은 이벤트의 다른 리스너가 Event 호출 못하도록 함. Event
stopPropagation()
이벤트 흐름 중 이벤트 추가 전파 방지. Event
storageArea
영향 받는 스토리지 객체를 나타내는 객체 반환. StorageEvent
[T]
target
이벤트를 촉발한 요소 반환. Evnet
targetTouches
표면과 접촉 중이거나 현재 대상 요소와 동일한 대상 요소에서 터치 시작 이벤트가 발생한 모든 터치 객체의 목록 반환. (= 현재 대상 요소를 터치하고 있는 각 손가락에 대해 하나씩 Touch 객체의 배열 반환) TouchEvent
timeStamp
이벤트가 작성된 시간 (기원에 상대적인 밀리 초 단위) 반환. Event
total
로드할 총 작업량 반환. ProgressEvent
touches
표면에 현재 접촉하고있는 모든 터치 객체의 목록 반환. TouchEvent
transitionend
CSS 전환이 완료 될 때 이벤트 발생. TransitionEvent
type
이벤트 이름 반환. Event
[U]
url
변경된 항목의 문서 URL 반환. StorageEvent
[V]
view
이벤트가 발생한 Window 객체에 대한 참조 반환. UiEvent
[W]
which
마우스 이벤트가 촉발되었을 때 어떤 마우스 버튼이 눌렸는지 반환. MouseEvent
which
onkeypress 이벤트를 촉발한 키의 유니코드 문자코드 또는 onkeydown 또는 onkeyup 이벤트를 촉발한 키의 유니코드 키코드 반환. KeyboardEvent