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

글쓴이 /

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

마우스 이벤트

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

onclick 예제

<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>

이벤트 동작을 직접 확인할 수 있는 간단한 예제입니다.

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>
올려보세요

이벤트 동작을 직접 확인할 수 있는 간단한 예제입니다.

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>

X: 0, Y: 0

이벤트 동작을 직접 확인할 수 있는 간단한 예제입니다.

마무리

모바일의 발달로 요즘은 마우스 관련 이벤트를 많이 사용하지 않는 듯 같습니다. CSS, jQuery의 발전이 한몫한 것 같습니다. 하지만, 꼭 필요할 때 찾아보기 위해 소개 겸 한번 작성해 봤습니다.

위로 스크롤