다양한 이벤트
MouseEvent.type
mousedown >> 마우스 버튼을 누르는 순간
mouseup >> 마우스 버튼을 눌렀다 떼는 순간
click >> 왼쪽 버튼을 클릭한 순간
dblclick >> 왼쪽 버튼을 빠르게 두 번 클릭한 순간
contextmenu >> 오른쪽 버튼을 클릭한 순간
mousemove >> 마우스를 움직이는 순간
mouseover >> 마우스 포인터가 요소 위로 올라온 순간
mouseout >> 마우스 포인터가 요소에서 벗어나는 순간
mouseenter >> 마우스 포인터가 요소 위로 올라온 순간 (버블링x)
mouseleave >> 마우스 포인터가 요소에서 벗어나는 순간 (버블링x)
KeyboardEvent.type
keydown >> 키보드의 버튼을 누르는 순간
keypress >> 키보드의 버튼을 누르는 순간 (출력 가능한 키에서만 동작)
keyup >> 키보드의 버튼을 눌렀다 떼는 순간
input tag ( focus )
focusin >> 요소에 포커스가 되는 순간
focusout >> 요소로부터 포커스가 빠져나가는 순간
focus >> 요소에 포커스가 되는 순간 (버블링x)
blur >> 요소로부터 포커스가 빠져나가는 순간 (버블링x)
input tag
change >> 입력된 값이 바뀌는 순간
input >> 값이 입력되는 순간
select >> 입력 양식의 하나가 선택되는 순간
submit >> 폼을 전송하는 순간
스크롤 이벤트
scroll >> 스크롤 바가 움직일 때
윈도우창 이벤트
resize >> 윈도우 사이즈를 움직일 때 발생
이벤트 객체 프로퍼티
공통 프로퍼티
type >> 이벤트 이름 ( click mousedown keydown etc )
target >> 이벤트가 발생한 요소
currentTarget >> 이벤트 핸들러가 등록된 요소
timeStamp >> 이벤트 발생 시각 ( 페이지가 로드된 이후부터 경과한 밀리초 )
bubbles >> 버블링 단계인지를 판단하는 값
MouseEvent.property
button >> 누른 마우스의 버튼 ( 0: 왼쪽 1: 휠 2: 오른쪽 )
clientX clientY >> 마우스 커서의 브라우저 표시 영역에서의 위치
pageX pageY >> 마우스 커서의 문서 영역에서의 위치
offsetX offsetY >> 마우스 커서의 이벤트 발생한 영역에서의 위치
screenX screenY >> 마우스 커서의 모니터 화면 영역에서의 위치
clientX: 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치
clientY: 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치
offsetX: 이벤트가 발생한 target 내에서 마우스의 X좌표 위치
offsetY: 이벤트가 발생한 target 내에서 마우스의 Y좌표 위치
pageX: 전체 문서 내에서 마우스의 X좌표 위치
pageY: 전체 문서 내에서 마우스의 Y좌표 위치
키보드 이벤트
key >> 누른 키가 가지고 있는 값
code >> 누른 키의 물리적인 위치
altKey >> 이벤트가 발생할 때 alt키를 눌렀는지
ctrlKey >> 이벤트가 발생할 때 ctrl키를 눌렀는지
shiftKey >> 이벤트가 발생할 때 shift키를 눌렀는지
metaKey >> 이벤트가 발생할 때 meta키를 눌렀는지 (window.cmd)
이벤트 흐름
캡처링
: 이벤트가 하위 요소로 전파되는 단계
캡처링 단계에서 이벤트 핸들러를 동작시키려면,
addEventListener의 세번째 프로퍼티에
true또는{capture:true}를 전달!⭐
타깃
: 이벤트가 실제 타깃 요소에 전달되는 단계
버블링
: 이벤트가 상위요소로 전파되는 단계
이벤트가 발생하면
window 객체 ~ target 객체이벤트 전파 (capturing)
target 에 도달하면 target 에 등록된 이벤트 핸들러가 동작 (target)
이후 다시 window 객체로 이벤트 전파 (bubbling)
이벤트 핸들러
등록하기
Element.addEventListener('type', 'handler')
삭제하기
Element.removeEventListner('type', 'handler')
이벤트 버블링 막기
이벤트 객체의 stopPropagation 메소드
브라우저의 기본 동작 막기
이벤트 객체의 preventDefault 메소드
