HTML 마우스 이벤트 onmouseenter, onmouseover, onmouseout, onmousemove

1 onmouseenter 이벤트[ | ]

마우스 포인터가 요소 안으로 들어올 때(자식 포함) 발생하는 이벤트
요소 밖으로 나갔다 오지 않으면 계속 발생하지 않음

2 onmouseover 이벤트[ | ]

onmouseout 의 반대 개념
마우스 포인터가 요소 안으로 들어올 때 + 자식 요소 출입시 발생하는 이벤트
요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올 때 발생함

3 onmouseout 이벤트[ | ]

onmouseover 의 반대 개념
마우스 포인터가 요소 밖으로 나갈 때 + 자식 요소 출입시 발생하는 이벤트
요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올 때 발생함

4 onmousemove 이벤트[ | ]

마우스 포인터가 요소 위에서 움직일 때(자식 포함) 발생하는 이벤트
요소 위에서 마우스를 움직이면 계속 발생함

5 예시[ | ]

html

Copy

<script src="//code.jquery.com/jquery.min.js"></script>
<style>
#my-box {
    background: Tomato;
    width: 300px; height: 300px;
    margin: 50px;
    text-align: center;
}
p {
    background: Orange;
    margin: 50px 70px;
    height: 300px;
}
 
</style>
 
<div id='my-box' onmouseenter="add('enter');" onmouseover="add('over');" onmouseout="add('out');" onmousemove="add('move');">my-box
    <p></p>
</div>
 
<script>
function add(str) {
    counts[str]++;
    showCount();
}
function showCount() {
    $('p').html(
        '<br>enter: '+ counts['enter']
        + '<br><br>over: '+ counts['over']
        + '<br><br>out: '+ counts['out']
        + '<br><br>move: '+ counts['move']);
}

var counts = { 'enter': 0, 'over': 0, 'out': 0, 'move': 0 }
showCount();
</script>

6 같이 보기[ | ]

7 참고[ | ]