자바스크립트 마우스 관련 이벤트

사용자가 마우스로 버튼 클릭하거나, 스크롤을 하거나, 마우스가 특정 위치 오거나, 나가거나 할 때 발생하는 마우스 이벤트에 대해서 알아보겠습니다. 자바스크립트 이벤트이며, 여러 개 중 가장 많이 사용하는 몇 가지 샘플도 소개해 드리겠습니다.

마우스 이벤트

웹 페이지나 애플리케이션에서 사용자의 마우스 동작을 감지하고 반응하는 기능을 말합니다. 클릭, 더블클릭, 마우스 오버 등 다양한 마우스 이벤트를 활용하면 인터페이스를 더욱 직관적이고 생동감 있게 만들 수 있습니다.

마우스 이벤트들 📌

onmouseover: 예를 들어 버튼 또는 링크 영역 위로 마우스가 올라왔을 때 발생하는 이벤트
onmouseout: onmouseover와 반대로 특정 영역을 마우스가 벗어날 때 발생하는 이벤트
onmousedown: 마우스 버튼을 누를 때 발생하는 이벤트
onmouseup: 마우스 버튼을 눌렀다가 뗄 때 발생하는 이벤트
onclick: 마우스 버튼을 클릭했을 때 발생하는 이벤트
ondblclick: 마우스 버튼을 더블 클릭했을 때 발생하는 이벤트
oncontextmenu: 마우스 오른쪽 버튼을 눌렀을 때 발생하는 이벤트

onclick 예제

<button type="button" onclick="return onClickEvent();">클릭</button>

<script>
function onClickEvent() {
    alert("onclick 이벤트");
}
</script>

<button type="button" onclick="return onClickEvent();">클릭</button>

<script>
function onClickEvent() {
    alert("onclick 이벤트");
}
</script>

마우스를 클릭 했을 때, 이벤트 동작을 직접 확인할 수 있는 간단한 예제입니다.

ondblclick 예제

<button type="button" ondblclick="return onDblClickEvent();">더블클릭</button>

<script>
function onDblClickEvent() {
    alert("ondblclick 이벤트");
}
</script>

<button type="button" ondblclick="return onDblClickEvent();">더블클릭</button>

<script>
function onDblClickEvent() {
    alert("ondblclick 이벤트");
}
</script>

마우스를 더블 클릭 했을 때, 이벤트 동작을 직접 확인할 수 있는 간단한 예제입니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

onmouseover / onmouseout 예제

<div onmouseover="this.style.background='lightblue'"
     onmouseout="this.style.background='#eee'"
     style="width:100%; border:0px solid #000; border-radius: 10px; background:#eee; padding:20px;">
     올려보세요
</div>

<div onmouseover="this.style.background='lightblue'"
     onmouseout="this.style.background='#eee'"
     style="width:100%; border:0px solid #000; border-radius: 10px; background:#eee; padding:20px;">
     올려보세요
</div>

올려보세요

특정 위치에 마우스가 올라갔다가 빠질 때 이벤트 동작을 직접 확인할 수 있는 간단한 예제입니다.

onmousemove 예제

<div onmousemove="show(event)" style="height:100px; background:#eee; border-radius:10px;"></div>
<p id="pos">X: 0, Y: 0</p>

<script>
function show(e) {
document.getElementById("pos").innerText = `X: ${e.offsetX}, Y: ${e.offsetY}`;
}
</script>

<div onmousemove="show(event)" style="height:100px; background:#eee; border-radius:10px;"></div>
<p id="pos">X: 0, Y: 0</p>

<script>
function show(e) {
document.getElementById("pos").innerText = `X: ${e.offsetX}, Y: ${e.offsetY}`;
}
</script>

X: 0, Y: 0

마우스의 움직일 때 이벤트 동작을 직접 확인할 수 있는 간단한 예제입니다.

마무리

자바스크립트에서 마우스 이벤트는 사용자와 웹 페이지 간의 상호작용을 구현하는 데 핵심적인 역할을 합니다. 클릭(click), 더블클릭(dblclick), 마우스오버(mouseover), 마우스아웃(mouseout), 마우스무브(mousemove) 등 다양한 마우스 이벤트를 활용하면 동적인 UI를 만들 수 있어 사용자 경험을 크게 향상시킬 수 있습니다.

예를 들어, 마우스 이벤트를 통해 버튼에 마우스를 올렸을 때 색상이 바뀌거나, 특정 영역을 클릭했을 때 팝업이 나타나는 등의 인터랙션을 구현할 수 있습니다. 또한 이벤트 리스너를 적절히 등록하고 제거함으로써 성능을 최적화하고, 예기치 않은 동작을 방지할 수 있습니다.

마우스 이벤트는 단순한 클릭을 넘어서, 웹 애플리케이션의 반응성과 직관성을 높이는 데 필수적인 도구입니다. 다양한 마우스 이벤트를 이해하고 적절히 활용하는 것은 자바스크립트 개발자로서의 역량을 한층 강화하는 길이라 할 수 있습니다.

🏷 CSS팁, 자바스크립트