[JS] 이벤트처리 - 마우스 조작

https://developer.mozilla.org/ko/docs/Web/Events#%EA%B0%80%EC%9E%A5_%EC%9D%BC%EB%B0%98%EC%A0%81%EC%9D%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC

이벤트 참조 | MDN

마우스 이벤트	이벤트명발생하는 시점
mouseenter (en-US)	포인팅 장치가 리스너가 등록된 엘리먼트 위로 이동했을 때.
mouseover (en-US)	포인팅 장치가 리스너가 등록된 엘리먼트나 그 자식 엘리먼트의 위로 이동했을 때.
mousemove (en-US)	포인팅 장치가 엘리먼트 위에서 이동했을 때(마우스가 이동하는동안 계속 실행됨.)
mousedown (en-US)	포인팅 장치 버튼이 엘리먼트 위에서 눌렸을 때.
mouseup (en-US)	포인팅 장치 버튼이 엘리먼트 위에서 놓였을 때.
auxclick	포인팅 장치 버튼(주가 아닌 버튼)이 엘리먼트에서 눌렸다가 놓였을 때.
click	포인팅 장치 버튼(모든 버튼; 주 버튼만 해당될 예정)이 엘리먼트에서 눌렸다가 놓였을 때.
dblclick (en-US)	포인팅 장치 버튼이 엘리먼트에서 두 번 클릭되었을 때.
contextmenu (en-US)	마우스의 오른쪽 버튼이 클릭되었을 때(컨텍스트 메뉴가 표시되기 전).
wheel (en-US)	포인팅 장치의 휠 버튼이 어떤 방향이든 회전되었을 때.
mouseleave (en-US)	포인팅 장치가 리스너가 등록된 엘리먼트 밖으로 이동했을 때.
mouseout (en-US)	포인팅 장치가 리스너가 등록된 엘리먼트 또는 그 자식 엘리먼트의 밖으로 이동했을 때.
select (en-US)	어떤 텍스트가 선택되고 있을 때.
pointerlockchange (en-US)	포인터가 잠겼거나 해제되었을 때.
pointerlockerror (en-US)	기술적인 이유나 권한 거절을 이유로 포인터 잠금이 불가했을 때.

포인트 장치 : 마우스 , 터치패드 등을 말한다.

 

See the Pen Untitled by Tae (@Tae54) on CodePen.

1번째 상자는 마우스를 클릭하거나 영역 안에서 움직일 때 이벤트를 처리한다.

 

2번째와 3번째 상자의 차이는  상자의 테두리에 마우스를 가져다 대면 알 수 있다.

옅은 색의 상자의 테두리가 안의 짙은 색의 부모요소로

3번째 상자는 mouseover/mouseout은 부모 요소도 포함하여 이벤트 처리하는데 반해

2번째 상자에서 쓰인 mouseenter/mouseleave은 안의 자식 요소에서만 이벤트를 처리한다.

 

1. 마우스 왼쪽을 누르고 있을 때

const logArea = document.querySelector('#log2');

logArea.addEventListener('mousedown',()=>{
  logArea.innerHTML = `클릭 버튼을 누르고 있어!`;
});

이벤트 타입으로 'mousedown'이 사용되었다.

 

타겟 : document.querySelector('#log2')

값 : div#log2 안의 문자열 생성 `문자열`

결과 : 요소의 값이 사용자에게 입력받은 결과값으로 변경된다.

 

이 외에도 다양한 마우스 조작에 따라 다양한 처리를 할 수 있다.

 

 

2. 마우스 위치에 따른 조작하기

마우스의 위치를 가져올 수 있는 속성은 client / offset / page / screen 이 있고 각각 X좌표(맨 왼쪽이 0) Y좌표(맨 위가 0) 두가지로 나타낼 수 있다.

See the Pen Untitled by Tae (@Tae54) on CodePen.

function moving(event1) {
  character.style.left = `${event1.clientX - 100}px`;
  character.style.top = `${event1.clientY - 100}px`;
}

클래스 이름이 character인 html 요소를 브라우저 기준의 마우스 좌표를 가져와 css속성에서 x좌표와 y좌표를 변경해준다.

사자가 마우스 조작으로 움직일 수 있다.