[javascript] mouseover, mouseout 마우스 이벤트의 개념과 활용

오늘은 자바스크립트의 기본 이벤트인 mouseover, mouseout에 대해서 정리해 보려고 한다. 이름에서도 알 수 있듯이 마우스 관련 이벤트이며, 기능의 개념과 예제 코드를 통해 정리해보려고 한다. 웹 개발에서는 없어서는 안 될 이벤트 중 하나이며, 다양한 유형의 이벤트가 있다.

---

마우스 이벤트 종류

자바스크립트에서 마우스 이벤트는 다양하게 지원이 되고 있는데, 이러한 마우스 이벤트는 사용자와의 상호작용을 통해 웹 페이지를 보다 동적으로 만드는 데 유용하다.

click
마우스를 클릭할 때 발생하는 이벤트이며, 주로 버튼 클릭, 링크 클릭, 요소선택 등에 사용된다.

dbclick
마우스를 빠르게 두 번 클릭할 때 발생하는 이벤트이다.

mousedown
마우스 버튼을 누르는 순간 발생하는 이벤트이다. 클릭과 달리 버튼이 눌려질 때 발생하며, 드래그 앤 드롭 등의 기능을 구현할 때 활용될 수 있다.

mouseup
마우스 버튼을 누른 후 떼었을 때 발생하는 이벤트이다. 버튼이 떼어질 때 발생하며, 클릭 이벤트와 함께 사용하여 특정 동작을 수행할 수 있다.

mousemove
마우스 포인터가 요소 위를 움직일 때 발생하는 이벤트이며, 마우스의 위치를 추적하여 마우스 이동에 따른 동적인 기능을 구현할 수 있다.

mouseover
마우스 포인터가 요소를 벗어날 때 발생하는 이벤트이며, 이벤트 핸들러를 통해 특정 동작을 수행할 수 있다.

mouseenter
마우스 포인터가 요소 안으로 들어올 때 발생하는 이벤트이다. mouseover와 유사하지만, 자식 요소로 이동할 때에는 발생하지 않는다.

mouseleave
마우스 포인터가 요소를 벗어날 때 발생하는 이벤트이다. mouseout과 유사하지만, 자식 요소로 이동할 때에는 발생하지 않는다.


이러한 마우스 이벤트를 활용하여 다양한 동적인 화면을 구현할 수 있다.

 

 

---

mouseover 예제 소스 코드

지정한 DOM 영역에 마우스를 올리면 이벤트가 발생

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // 선택 요소
    const mouseId = document.querySelector('#mouseId');
    const eventResult = document.querySelector('#eventResult');

    /**
     * mouseover event
     */
    mouseId.addEventListener('mouseover', (e) => {
        eventResult.textContent = 'mouse over';
    });
});

</script>
<div>Mouse Event</div>
<hr>
<div>
    <button id="mouseId">Mouse Button</button>
    <div id="eventResult"></div>
</div>

위의 코드는 마우스가 요소 위로 올라갈 때 mouseover 이벤트 발생을 처리하는 예제다. 

이벤트 리스너 등록
mouseover 이벤트에 대한 리스너가 mouseId 요소에 등록되며, 이벤트가 발생하면 해당 리스너가 호출된다.

이벤트 처리 함수
마우스가 mouseId 요소 위로 올라갈 때 실행되는 이벤트 처리 함수가 정의된다. 이 함수는 마우스 이벤트 객체('e')를 매개변수로 받는다.

이벤트 결과 표시
이벤트 처리 함수에서는 eventResult 요소의 텍스트 내용을 'mouse over'로 설정되며, 마우스가 mouseId 요소 위로 올라갈 때 'mouse over'라는 텍스트가 'eventResult' 요소에 표시된다.

실행 결과 위의 화면과 같이 마우스를 버튼 위로 올렸을 때, 하단의 div 태그의 text 정보를 넣어주고 있다.

---

mouseout 예제 소스 코드

지정한 DOM 영역에 마우스가 벗어날 때 이벤트가 발생

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // 선택 요소
    const mouseId = document.querySelector('#mouseId');
    const eventResult = document.querySelector('#eventResult');

    /**
     * mouseover event
     */
    mouseId.addEventListener('mouseover', (e) => {
        eventResult.textContent = 'mouse over';
    });

    /**
     * mouseout event
     */
    mouseId.addEventListener('mouseout', (e) => {
        eventResult.textContent = 'mouse out';
    });
});

</script>
<div>Mouse Event</div>
<hr>
<div>
    <button id="mouseId">Mouse Button</button>
    <div id="eventResult"></div>
</div>

위의 코드는 mouseout 이벤트가 발생했을 때 처리하는 예제다.

이벤트 리스너 등록
mouseover와 mouseout 이벤트에 대한 리스너가 각각 mouseId 요소에 등록된다. 이벤트가 발생하면 해당 리스너가 호출된다.

이벤트 처리 함수
마우스가 mouseId 요소 위로 올라갈 때와 요소를 벗어날 때 실행되는 이벤트 처리 함수가 정의된다. 이 함수들은 각각 마우스 이벤트 객체('e')를 매개변수로 받는다.

이벤트 결과 표시
mouseover 이벤트 처리 함수에서는 eventResult 요소의 텍스트 내용을 mouseover로 설정하고, mouseout 이벤트 처리 함수에서는 'mouse out'으로 설정한다. 따라서 마우스가 mouseId 요소 위로 올라갈 때와 요소를 벗어날 때 각각 'mouse over'와 'mouse out'이라는 텍스트가 eventResult 요소에 표시된다.

mouseover와 동일하게 mouseout 이벤트를 추가했을 때 over, out이 순차적으로 이벤트가 발생하는 결과 화면이다.

 

 

---

mouseenter 예제 소스 코드

지정한 DOM 영역에 마우스를 올리면 이벤트가 발생
mouseover와 유사하지만 mouseover는 이벤트 버블링이 발생을 하고 mouseenter는 버블링이 발생하지 않는다는 차이점이 있다.

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // 선택 요소
    const mouseId = document.querySelector('#mouseId');
    const eventResult = document.querySelector('#eventResult');
    
    /**
     * mouseenter event
     */
     mouseId.addEventListener('mouseenter', (e) => {
        eventResult.textContent = 'mouse enter';
    });
});

</script>
<div>Mouse Event</div>
<hr>
<div>
    <button id="mouseId">Mouse Button</button>
    <div id="eventResult"></div>
</div>

위의 예제 코드는 mouseover 예제와 유사하므로 설명 생략.

위의 결과 화면과 같이 하나의 DOM 영역만 있다면 mouseover의 기능과 크게 차이가 없다.
하지만 DOM tag가 여러 개 겹쳐져 있는 상황에 mouseover는 겹쳐진 부분까지 이벤트 버블링이 발생하여 이벤트가 발생을 하게 되고,
mouseenter는 겹쳐진 부분을 제외하고 해당되는 영역에서만 이벤트를 발생시킨다는 차이점이 있다.

mouseleave도 동일하게 mouseout과 이벤트 버블링이 발생하는지의 차이점을 가지고 있다.

 

---

mouseleave 예제 소스 코드

지정한 DOM 영역에 마우스가 벗어나면 이벤트가 발생
mouseout과 유사하지만 mouseout은 이벤트 버블링이 발생을 하고 mouseleave는 버블링이 발생하지 않는다는 차이점이 있다.

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // 선택 요소
    const mouseId = document.querySelector('#mouseId');
    const eventResult = document.querySelector('#eventResult');

    /**
     * mouseenter event
     */
     mouseId.addEventListener('mouseenter', (e) => {
        eventResult.textContent = 'mouse enter';
    });

    /**
     * mouseleave event
     */
    mouseId.addEventListener('mouseleave', (e) => {
        eventResult.textContent = 'mouse leave';
    });
});

</script>
<div>Mouse Event</div>
<hr>
<div>
    <button id="mouseId">Mouse Button</button>
    <div id="eventResult"></div>
</div>

위의 예제 코드는 mouseout 예제와 유사하므로 설명 생략.

mouseleave도 마찬가지로 보기와 같이 하나의 DOM 영역만 있다면 mouseout의 기능과 크게 차이가 없다.
하지만 mouseleave도 동일하게 mouseout과 이벤트 버블링이 발생하는지의 차이점을 가지고 있다.

 

---

마우스 이벤트 사용 시 주의사항

오늘 정리한 마우스 이벤트(mouseover, mouseout, mouseenter, mouseleave)를 사용할 때에 주의해야 할 사항이 있다.

버블링과 캡처링
이벤트 처리 중에는 이벤트의 버블링(bubbling)과 캡처링(capturing)을 고려해야 한다. 버블링은 하위 요소에서 상위 요소로 이벤트가 전파되는 것을 의미하고, 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파되는 것을 의미한다. 특히 mouseout과 mouseleave 이벤트는 버블링이 발생할 수 있으므로 기능 구현시 이 부분을 고려하여 처리하는 것이 좋다.

이벤트의 중첩
여러 요소에 마우스 이벤트를 등록할 때, 요소들이 중첩되어 있는 경우에는 이벤트가 중첩될 수 있다. 이 경우에는 이벤트 전파를 멈추는 stopPropagation() 함수를 사용하여 이벤트의 전파는 중지하는 것이 좋다.

마우스 이벤트의 연계
mouseover와 mouseout은 하위 요소로의 이동에도 이벤트가 발생하므로, 이벤트 발생시 하위 요소에서 상위 요소로 이동할 때 문제가 발생할 수 있다. 이런 경우 mouseenter와 mouseleave를 사용하여 상위 요소로의 이벤트 전파는 방지할 수 있다.

mouseenter와 mouseleave의 한계
mouseenter와 mouseleave는 하위 요소로의 이동에 대해 이벤트를 발생시키지 않는다. 따라서 하위 요소에서 상위 요소로 이동할 때에는 mouseover와 mouseout을 사용하는 것이 좋다.

이벤트 발생 순서
mouseover와 mouseout은 마우스 포인터가 요소를 벗어나거나 들어갈 때마다 발생하지만, mouseenter와 mouseleave는 요소 전체에 대해 한 번씩만 발생한다. 이 부분을 고려하여 각 이벤트의 특징을 이해하고 사용하는 것이 좋다.

호환성
mouseenter와 mouseleave는 IE9 이상에서만 지원이 되며, 호환성을 고려하여 이벤트를 선택하는 것이 중요하다.


마우스 이벤트의 기능은 매우 강력하지만 그에 따른 주의사항들도 기능 구현시 반드시 고려하는 것이 중요하다. 기능이 간단한 만큼 어떠한 상황에서 버블링이나 캡처링, 이벤트의 중첩, 호환성 등 발생할 수 있으므로 이 부분들을 숙지하고 구현해야 한다.

---

마무리

오늘은 자바스크립트의 마우스 관련 이벤트 4종류를 정리해 보았다. 기능 자체는 워낙 간단하고 대중적으로 많이 사용하는 기능이지만, 내부적으로 처리되는 방식의 차이 때문에 정확히 알아두는 것이 좋다. 이벤트는 유사하지만 버블링 된다는 차이점이 매우 크므로, 적재적소에 맞게 이벤트를 적용하는 것이 중요하다.