참고: https://www.educba.com/javascript-mouse-events/
이 포스트에서는 JavaScript의 마우스 이벤트에 대해 알아보겠습니다.
마우스 이벤트는 mouseEvent 객체에 등록된 html 요소와 마우스가 상호작용했을 때 발생하는 이벤트입니다. mouse click, mouse over, mouse out 등과 같이 마우스와 관련된 다양한 이벤트가 존재합니다.
마우스 이벤트가 생성될 때 마다 일부 동작이 브라우저에서 수행됩니다. 마우스 이벤트를 처리하기 위해 수행하는 동작과 마우스 이벤트를 처리하는 프로세스를 마우스 이벤트 핸들러라고 합니다.
자바스크립트의 마우스 이벤트 타입
click: 마우스가 등록된 요소를 클릭했을 때 발생합니다. 이벤트 핸들러의 이름은 onclick 입니다.
mouseup: mouseup 이벤트는 요소에서 마우스 버튼을 놓을 때 발생합니다. 이벤트 핸들러의 이름은 onmouseup 입니다.
mousedown: mousedown 이벤트는 요소에서 마우스 버튼을 눌렀을 때 발생합니다. 이벤트 핸들러의 이름은 onmousedown 입니다.
mousemove: mousemove 이벤트는 마우스의 버튼이 등록된 요소에서 이동할 때 발생합니다. 이벤트 핸들러의 이름은 onmousemove 입니다.
mouseover: mouseover 이벤트는 마우스 커서가 요소 위로 이동할 때 발생합니다. 이벤트 핸들러의 이름은 onmouseover 입니다.
mouseout: mouseout 이벤트는 마우스 커서가 요소 밖으로 나갈 때 발생합니다. 이벤트 핸들러의 이름은 onmouseout 입니다.
예제 1: click event
<!DOCTYPE html>
<html lang="en">
<head>
<title> This is an example for mouse events </title>
</head>
<body>
<button onclick="funHandler()" style="color:#FF0000"> Click here to generate mouse click event. </button>
<div id="divid" style="color: #0900C4"></div>
<script>
function funHandler() {
document.getElementById("divid").innerHTML = "The Mouse click event is generated and it handled.";
}
</script>
</body>
</html>
위의 코드를 실행하여 버튼을 클릭하면 마우스 클릭 이벤트가 발생합니다. 버튼 요쇼에서 onclick 이벤트의 핸들러로 funHandler() 함수를 지정해서 사용자가 버튼을 클릭하면 click 이벤트가 생성되고 funHandler() 함수가 실행되어 위와 같이 텍스트를 화면에 출력합니다.
예제 2: mouseup event
<!DOCTYPE html>
<html lang="en">
<head>
<title> This is an example for mouse events </title>
</head>
<body>
<button onmouseup="funHandler()" style="color:#FF0000"> Click here to generate mouse up event. </button>
<div id="divid" style="color: #0900C4"></div>
<script>
function funHandler() {
document.getElementById("divid").innerHTML = "The Mouse up event is generated and it handled.";
}
</script>
</body>
</html>
위의 결과와 같이 mouse up 이벤트는 마우스 버튼을 눌렀다 손을 뗐을 때 한 번 처리됩니다. 버튼에서 onmouseup 이벤트 핸들러로 funHandler() 함수를 지정했으므로 버튼을 눌렀다 떼면 onmouseup 이벤트가 발생하고 funHandler() 함수가 실행되어 위의 이미지와 같이 텍스트를 출력합니다.
예제 3: mousedown event
<!DOCTYPE html>
<html>
<head>
<title> This is an example for mouse events </title>
</head>
<body>
<button onmousedown="funHandler()" style="color:#FF0000"> Click here to generate mouse down event. </button>
<div id="divid" style="color: #0900C4"></div>
<script>
function funHandler() {
document.getElementById("divid").innerHTML = "The Mouse down event is generated and it handled.";
}
</script>
</body>
</html>
위의 예제에서 보는 바와 같이 mouse down 이벤트는 버튼을 눌렀을 때 한 번 처리됩니다. 버튼의 onmousedown 이벤트 핸들러 함수로 funHandler() 함수를 지정했고 버튼을 누르면 onmousedown 이벤트가 생성되어 funHandler() 함수가 실행됩니다.
예제 4: mousemove event
<!DOCTYPE html>
<html>
<head>
<title> This is an example for mouse events </title>
</head>
<body>
<button onmousemove="style.color='#FF0000'"> Move here to generate mouse move event. </button>
</body>
</html>위의 예제에서는 버튼 위로 마우스를 이동하면 mouse move 이벤트가 처리됩니다. 버튼의 onmousemove 핸들러로 문자열 색상을 빨간색으로 변경하는 코드를 넣었고 사용자가 마우스 커서를 버튼 위로 이동하면 onmousemove 이벤트가 생성되고 버튼의 문자열이 빨갛게 변경됩니다.
예제 5: mouseover, mouseout event
<!DOCTYPE html>
<html>
<head>
<title> This is an example for mouse events </title>
</head>
<body>
<p>Mouse over the button, and get mouse pointer coordinates. </p>
<button id="bid" onmouseover="funOver(event)" onmouseout="funOut(event)"> Move here to generate mouse move event.
</button>
<h3 id="hid"></h3>
<script>
function funOver(e) {
px = e.clientX;
py = e.clientY;
pxy = " x and y Coordinates = (" + px + "," + py + ")";
document.getElementById("hid").innerHTML = pxy
}
function funOut() {
document.getElementById("hid").innerHTML = "";
}
</script>
</body>
</html>
mouse over 이벤트와 mouse out 이벤트는 버튼에 마우스 커서가 들어갈 때 나올 때 발생합니다. 버튼의 onmouseover 이벤트 핸들러로는 funOver() 함수를, onmouseout 이벤트 핸들러에는 funOut() 함수를 지정하여 마우스가 버튼위로 이동하면 x, y 좌표를 표시하고 밖으로 나가면 텍스트를 지우도록 합니다.
정리
HTML 요소와 마우스가 상호작용하면 마우스 이벤트가 생성됩니다. 마우스 이벤트에는 click, mousemove, mouseup, mousedown, mouseout, mouseover 와 같은 다양한 타입의 마우스 이벤트가 있습니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] CSS 이미지 필터 (image filters) (10) | 2023.06.21 |
|---|---|
| [javascript] 자바스크립트 배열 생성 (array) (7) | 2023.06.15 |
| [javascript] 자바스크립트 localStroage (12) | 2023.06.08 |
| [javascript] 자바스크립트 전체 화면 (Fullscreen API) (9) | 2023.06.08 |
| [javascript] HTML 제곱 지수 위첨자 (sup) (7) | 2023.06.08 |
댓글