• 회원가입
  • 로그인
  • 구글아이디로 로그인

[DOM_Event] JS - Event 종류 ★ - 이벤트부착 / 이벤트종류 / 이벤트속성 / 이벤트메서드

목차
  1. Event 정의
  2. Event 구문 - addEventListener 사용 권장
  3. Event 종류 (abc순)
  4. 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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Math JS - Math.min() 메서드 ★ - 최소값 (= 최솟값 = Math.min메서드 = 매스민메서드)
Math JS - Math.pow() 메서드 ★ - 승수 (= 거듭제곱 = pow메서드 = 매스포우메서드/매스파워메서…
Math JS - Math.random() 메서드 ★ - 랜덤값 (= 임의값 = Math.random메서드 = 매스랜…
Math JS - Math.round() 메서드 ★ - 반올림 (= 라운드)
Math JS - Math.sin() 메서드 - 사인값
Math JS - Math.sqrt() 메서드 - 제곱근
Math JS - Math.tan() 메서드 - 탄젠트값
Date JS - Date 객체 - 날짜객체 (속성 + 메서드) 종류 ※Date()함수 = Date함수 = 데이트 함…
Date JS - constructor 속성 - 객체생성자함수 (날짜 경우)
Date JS - prototype 속성(날짜) - 사용자정의 속성/메서드 추가 (날짜객체경우 = 프로토타입)
Date JS - getDate() 메서드 ★ - 일자 얻기 (= getDate메서드 = 겟데이트)
Date JS - getDay() 메서드 - 요일 얻기 (예: 4) (= 요일 추출 = 요일 표시 = getDay메서…
Date JS - getFullYear() 메서드 - 년도 (= 4자리 전체년도얻기 = 겟풀이어)
Date JS - getHours() 메서드 - 시 (= 시얻기 = 시간얻기)
Date JS - getMilliseconds() 메서드 - 밀리초 (= 밀리세컨드)
Date JS - getMinutes() 메서드 - 분 (= 분얻기)
Date JS - getMonth() 메서드 - 월얻기 (= 달얻기 = 달월얻기 = getMonth메서드 = 겟먼스메…
Date JS - getSeconds() 메서드 - 초 얻기 (= 겟세컨즈메서드)
Date JS - getTime() 메서드 ★ - 시간 얻기 (= 타임스탬프얻기 = getTime메서드 = 겟타임메서…
Date JS - getTimezoneOffset() 메서드 - UTC시간과의 시차
11/67
목록
찾아주셔서 감사합니다. Since 2012