JS - 마우스 이벤트

마우스에 의해 발생한 이벤트는 다음 표를 아용할 수 있습니다.

이벤트	설 명
onmouseover	요소 위에 마우스를 올렸을 때 (이벤트 버블링이 이루어짐)
onmouseenter	요소 위에 마우스를 올렸을 때 (이벤트 버블링되지 않음)
onmousedown	마우스로 누르고 있을 떄
onmouseup	누르고 있는 마우스를 땔 때
onmousemove	요소 위에 있는 동안 마우스가 이동할 때
onmouseout	요소 위에서 마우스가 벗어났을 때 (이벤트 버블링이 이루어짐)
onmouseleave	요소 위에서 마우스가 벗어났을 때 (이벤트 버블링되지 않음)
onclick	마우스로 한 번 클릭했을 때
ondblclick	마우스로 더블 클릭했을 때
onwheel	요소 위에서 마우스 휠을 스크롤할 때
oncontextmenu	오른쪽 마우스 버튼을 누를 때

onmouseover

요소 위에 마우스를 올려 보세요. 이벤트가 발생합니다.

<div id="on">하보니  PHP</div>

<script>
var mouse = document.getElementById("on");
mouse.addEventListener("mouseover", mover);

function mover() {
  alert("마우스를 올렸습니다.");
}
</script>

onmousedown, onmouseup

마우스로 요소를 누르고 있을 때와 누르고 있던 마우스를 땔 때 글자 색상이 변합니다.

<div id="on">하보니  PHP</div>

<script>
var mouse = document.getElementById("on");
mouse.addEventListener("mousedown", mdown);
mouse.addEventListener("mouseup", mup);

// 마우스로 누르고 있을 때
function mdown() {
  mouse.style.color = "red";
}

// 누르고 있던 마우스를 땔 때
function mup() {
  mouse.style.color = "blue";
}
</script>

onmousemove, onmouseout

요소 위에 마우스를 올렸을 때와 마우스가 벗어날 때 배경 색상이 변합니다.

<style>
  #on {
    width: 100px;
    height: 100px;
    background: red;
    color: #FFF;
  }
</style>

<div id="on">하보니  PHP</div>

<script>
var mouse = document.getElementById("on");
mouse.addEventListener("mousemove", mmove);
mouse.addEventListener("mouseout", mout);

function mmove() {
  mouse.style.background = "blue";
}

function mout() {
  mouse.style.background = "red";
}
</script>

onwheel

요소 위에서 마우스 휠을 움직이면 파란색으로 배경이 변합니다.

<style>
  #on {
    width: 100px;
    height: 100px;
    background: red;
    color: #FFF;
  }
</style>

<div id="on">하보니  PHP</div>

<script>
var mouse = document.getElementById("on");
mouse.addEventListener("wheel", mwheel);

function mwheel() {
  mouse.style.background = "blue";
}
</script>

oncontextmenu

요소 위에서 마우스 오른쪽 버튼을 클릭했을 때 경고창이 나타납니다.

<div id="on">하보니  PHP</div>

<script>
var mouse = document.getElementById("on");
mouse.addEventListener("contextmenu", cmenu);

function cmenu() {
  alert("마우스 오른쪽 버튼을 클릭했습니다.");
}
</script>