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

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();로 본래 엔터키의 기능을 상실하게 하고 이벤트만 발생시킨다

from http://devyoseph.tistory.com/13 by ccl(A) rewrite - 2021-09-26 00:27:31