1. 마우스 이벤트
• 클릭 관련
click : 요소 위에서 마우스를 클릭했을 때 이벤트 발생
dbclick : 요소에 마우스를 더블클릭했을 때 이벤트 발생
contextmenu : 요소 위에서 마우스 오른쪽을 클릭했을 때 이벤트 발생
mouseup : 요소 위에서 마우스를 떼었을 때 이벤트 발생
mousedown : 요소 위에서 마우스를 누르고 있을 때 이벤트 발생
• 마우스 움직임 관련
mouseover : 마우스가 요소 안에 들어올 때 이벤트 발생
mouseout : 마우스가 요소를 벗어날 때 이벤트 발생
mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 이벤트 발생
mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 이벤트 발생
mousemove : 마우스를 움직였을 때 이벤트 발생
mousedown 이벤트가 발생할 때 나타나는 브라우저 기본 동작 막기
ex) 마우스를 더블클릭하면 이벤트 외에 글자가 선택되는 경우 방지onmousedown="return false"복사 막기
oncopy="alert('복사 불가');return false
mouseover/mouseout VS mouseenter/mouseleave 차이점
mouseover/out: 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됨. 즉, 자식 요소에 접근해도 동작함
mouseenter/leave: 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨. 즉, 자식 요소에는 동작하지 않음.
결론적으로 두 메서드의 차이는 자식 요소들까지 영향을 주느냐 안 주느냐의 차이(버블링)이다. 마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 이벤트가 적용되는 깊이의 차이
button 프로퍼티
event.button과 event.which는 마우스의 어떤 버튼이 눌렸는지 알려준다.
• button 프로퍼티
event.button == 0 : 왼쪽 버튼
event.button == 1 : 가운데 버튼
event.button == 2 : 오른쪽 버튼
event.button == 3 : 뒤로가기 버튼
event.button == 4 : 앞으로가기 버튼
• which 프로퍼티는 지금은 사용하지 않는다.
event.which == 1: 왼쪽 버튼
event.which == 2: 가운데 버튼
event.which == 3: 오른쪽 버튼
보조키 프로퍼티
보조키 프로퍼티 - 마우스 이벤트가 발생할 때 함께 누른 보조키가 무엇인지 알려주는 프로퍼티
shiftKey : Shift 키
altKey : Alt (MacOS에선 Opt 키)
ctrlKey : Ctrl 키
metaKey : MacOS에서 Cmd 키
Windows와 Linux와는 달리, MacOS에선
Alt,Shift,Ctrl키 외에Cmd라는 키를 추가로 지원한다. Windows, Linux에선 Ctrl, MacOS에선 Cmd를 사용해 단축키를 조합하는 경우가 많다. 따라서, 모든 사용자가 운영체제 종류에 상관없이 동일한 경험을 하게 하려면 ctrlKey 프로퍼티를 사용하는 코드엔 metaKey도 함께 넣어주는 것이 바람직하다.
if (event.ctrlKey || event.metaKey)
클라이언트 좌표 / 페이지 좌표
• 클라이언트 좌표 → 페이지가 스크롤되어도 변하지 않음
clientX : 웹 문서를 기준으로 왼쪽에서 얼마나 떨어져 있는지
clientY : 웹 문서를 기준으로 위쪽에서 얼마나 떨어져 있는지
• 페이지 좌표 → 페이지를 스크롤하면 값도 변함
pageX : 창 왼쪽 기준으로 얼마나 떨어져 있는지
pageY : 창 위쪽 기준으로 얼마나 떨어져 있는지
마우스 이벤트와 함께 사용되는 HTML 드래그 이벤트
ondragstart : 드래그 시작할 때 이벤트 발생
ondrag : 드래그 중 이벤트 발생
ondragend : 드래그 끝났을 때 이벤트 발생
ondragenter : 드래그 한 요소가 목적지요소에 들어갈 때 이벤트 발생
ondragover : 드래그 한 요소가 목적지요소 위에 위치할 때 이벤트 발생
ondragleave : 드래그 한 요소가 목적지요소를 떠날 때 이벤트 발생
ondrop : 드래그 된 요소가 목적지요소에 놓일 때 이벤트 발생
draggable : 드래그 가능하게 설정. 기본적으로 드래그 가능
2. 키 이벤트
keydown : 키보드를 눌렀을 때 이벤트 발생
keyup : 키보드를 떼었을 때 이벤트 발생
keypress : 키보드를 누른 상태에서 이벤트 발생 -> 더이상 사용되지 않는다. 사용 권장X
key : 현재 키보드에서 존재하는 알파벳과 숫자 값
code : 키보드의 위치에 따라 달라지는 코드 (대소문자 주의)
① 문자 키 - "Key": "KeyA", "KeyB" 등
② 숫자 키 - "Digit": "Digit0", "Digit1" 등
③ 특수 키 - "Enter", "Backspace", "Tab" 등
*
keyCode: 키 값을 숫자로 적용
keyCode는 지금은 사용하지 않으며,key나code를 사용할 것을 권장한다. 옛날 코드를 보다가 만난다면 아래 글을 참고하도록 한다.
키보드 이벤트의 keyCode
keyEvent 처리
Keycode(ACSII Code) 목록
3. 포인터 이벤트
pointerdown : 포인터가 활성화되면 이벤트 발생
pointerup : 포인터가 더 이상 활성화되지 않으면 이벤트 발생
pointerover : 포인팅 장치가 요소의 적중 테스트 경계로 이동하면 이벤트 발생
pointerout : 포인팅 장치가 요소의 적중 테스트 경계 밖으로 이동할 때 이벤트 발생
pointerleave : 포인팅 장치가 요소의 적중 테스트 경계를 벗어나면 이벤트 발생
pointerenter : 포인팅 장치가 hover를 지원하지 않는 장치의 pointerdown 이벤트의 결과를 포함하여 요소 또는 그 자손 중 하나의 적중 테스트 경계로 이동할 때 이벤트 발생
pointermove : 포인터가 좌표를 변경하고 웹브라우저 터치 동작으로 취소되지 않은 경우 이벤트 발생
pointercancel : 웹브라우저가 더이상 포인터 이벤트가 없을 가능성이 있다고 판단하거나 pointerdown 이벤트가 발생한 후 포인터를 사용하여 이동, 확대, 축소 또는 스크롤을 통해 뷰포트를 조작하는데 사용
gotpointercapture : 요소가 setPointerCapture() 메소드를 사용하여 포인터를 캡처하면 이벤트 발생
lostpointercapture : 캡처된 포인터가 해제될 때 이벤트 발생
4. 폼 이벤트
focus : 요소에 포커스가 이동되었을 때 이벤트 발생
blur : 요소에 포커스가 벗어났을 때 이벤트 발생
change : 요소의 값이 변경 되었을 때 이벤트 발생
submit : submit 버튼을 눌렀을 때 이벤트 발생
reset : reset 버튼을 눌렀을 때 이벤트 발생
select : input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생
5. 기타 이벤트
load : 페이지의 로딩이 완료되었을 때 이벤트 발생
abort : 이미지의 로딩이 중단되었을 때 이벤트 발생
unload : 페이지가 다른 곳으로 이동될 때 이벤트 발생
resize : 요소의 사이즈가 변경되었을 때 이벤트 발생
scroll : 스크롤바를 움직였을 때 이벤트 발생
DOMContentLoaded : HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때 이벤트 발생
transitionend : CSS 애니메이션이 종료되었을 때 이벤트 발생
참고 자료
UI 이벤트
마우스 이벤트 mouseover/mouseout VS mouseenter/mouseleave 차이점
PointerEvent
