Javascript_08-2: 마우스이벤트, 키보드 이벤트

setTimeout(함수명, 밀리초);

*주의점: setTimeout이 실행시키는 함수로 클래스 값을 지울 때 e.target이 아닌 querySelector사용

밀리초 후에 함수를 실행한다

function event2(){
    document.querySelector('.change').classList.remove('change');
    //event2는 change 클래스를 찾아 change를 지운다
}

function event1(e){
   e.target.classList.add('change');
   setTimeout(event2,500);
   //500밀리초 후에 event2 실행
}

---

마우스 버튼 이벤트: MouseEvent.button

마우스 왼쪽 버튼 = 0
마우스 휠 = 1
마우스 오른쪽 버튼 = 2

function event2(e){
	console.log(`${e.button}`);
}

마우스 누르는 방식에 따라: MouseEvent.type

click: 마우스 왼쪽 버튼
contextmenu: 마우스 오른쪽 버튼
dblclick: 동일한 위치 두번 클릭
mousedown: 마우스를 누른 순간
mouseup: 마우스를 뗀 순간

function event2(e){
	console.log(`${e.type}`);
}

마우스 이벤트의 발생 순서

더블클릭: mousedown - mouseup - click - mousedown - mouseup - click -dblclick

마우스 오른쪽 클릭[Window]: mousedown - mouseup - contextmenu
마우스 오른쪽 클릭[MacOs]: mousedown - contextmenu - mouseup
오른쪽 클릭 후 창이 뜨는 경우: mousedown - contextmenu

 

마우스가 움직일 때: mousemove

mousemove는 아래 좌표와 같이 활용한다

마우스의 좌표: offset / client / page

offsetX / offsetY: target안에서의 좌표
clientX / clientY: 현재창에서의 좌표
pageX / pageY: 현재 페이지에서의 좌표

마우스 요소 경계선 이동: mouseover / mouseout

마우스 요소 경계선 이동: mouseenter / mouseleave (버블링X)

mouseover: 요소 밖 → 안
mouseout: 요소 안 → 밖
mouseenter: 요소 밖 → 안
mouseleave: 요소 안 → 밖

target
e.target	e.relatedTarget
이벤트가 발생한 요소	이벤트 발생 직전(직후)의 요소

---

키보드 이벤트: KeyboardEvent.type

keydown: 키보드 누른 순간, 계속 누르고 있는 경우
keypress: 키보드 누른 순간
keyup: 키보드 뗀 순간

*keypress는 문자, 숫자, 스페이스바처럼 출력에 직접적으로 연관있는 버튼만 관여(Esc, Shift 키 등은 반응X)

KeyboardEvent.key: 이벤트가 발생한 버튼의 값
KeyboardEvent.code: 이벤트가 발생한 버튼의 물리적인 위치

소문자와 대문자는 key값은 다르지만 code는 같다
오른쪽 shift와 왼쪽 shift는 key값은 같지만 code값이 다르다

//채팅창에서 엔터를 누르면 채팅을 보내기
//shift + Enter를 누르면 줄바꿈 기능
function sendByEnter(e) {
if(e.key == 'Enter' && !e.shiftKey){
    sendMyText();
    e.preventDefault();
}}

*e.preventDefault();로 본래 엔터키의 기능을 상실하게 하고 이벤트만 발생시킨다