Mouse Event
mouse와 관련된 대표 event에 대해 알아보자.
MouseEvent 인터페이스는 특정 지점을 가리키는 장치를 통해 발생하는 이벤트를 의미한다. (키보드, 마우스처럼)
1. mousedown / mouseup
요소 위에서 마우스를 클릭하거나 뗄 때 발생한다.
2. mouseover / mouseout
마우스 커서가 요소 바깥에 있다가 요소 안으로 움직이거나 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생합한다.
3. mousemove
마우스를 움직일 때 발생한다.
4. click
마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 실행된다다.
5. dblclick
동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 클릭할 때 발생한다. 요즘엔 잘 쓰이지 않는다고 한다!
6. contextmenu
마우스 오른쪽 버튼을 눌렀을 때 발생한다. 참고로 특별한 단축키를 눌러도 마우스 오른쪽 버튼을 눌렀을 때처럼 컨텍스트 메뉴가 나타나게 할 수는 있지만 contextmenu라는 마우스 이벤트와 동일하진 않습니다.
mousedown 예제
미리 그려둔 html의 cavas를 지정하여 마우스가 요소 위에서 움직일 때마다 값을 출력하도록 하였다.
const canvas = document.querySelector(".jsCanvas");
function onMouseMove(e) {
console.log(e);
}
if (canvas) canvas.addEventListener("mousemove", onMouseMove);