JS/jQuery - 마우스오버 메소드 : mouseover(), mouseout()와 mouseenter(), mouseleave()

닌니디자인 JS 썸네일

마우스오버란?

마우스를 특정 요소 위에 올려놓았을 때 발생하는 이벤트. 이는 웹사이트나 소프트웨어의 인터페이스에서 자주 사용되며, 마우스를 올렸을 때 시각적 피드백을 제공하거나 추가 정보를 표시하는 데 사용된다. 예를 들어, 웹사이트에서 마우스를 버튼 위에 올리면 버튼의 색상이 바뀌거나 툴팁(Tooltip)이 나타나는 경우, 이러한 기능은 사용자가 어떤 요소와 상호작용할 수 있는지 직관적으로 알 수 있다. 마우스오버는 HTML, CSS, JavaScript를 사용하여 구현할 수 있다. 

 

 

 

---

 

mouseover() VS mouseenter()

마우스 커서가 특정 HTML 요소 위에 올려질 때 발생. 

 

mouseover()

document.getElementById('parent').addEventListener('mouseover', function() {
    console.log('Mouse over parent element');
});

document.getElementById('child').addEventListener('mouseover', function() {
    console.log('Mouse over child element');
});

• 마우스 커서가 특정 요소나 그 자식 요소에 진입할 때 발생한다.
• 이벤트가 발생한 요소에서 상위 요소로 전파된다.
• 자식 요소와 부모 요소 사이의 마우스 이동을 감지해야 할 때 유용하다.
• 자식 요소 위로 마우스가 이동할 때 부모 요소의 이벤트 핸들러도 실행된다.

 

 

mouseenter()

document.getElementById('parent').addEventListener('mouseenter', function() {
    console.log('Mouse enter parent element');
});

document.getElementById('child').addEventListener('mouseenter', function() {
    console.log('Mouse enter child element');
});

• 마우스 커서가 특정 요소에 진입할 때 발생한다.
• 이벤트가 발생한 요소에서 상위 요소로 전파되지 않는다.
• 자식 요소와 상관없이 특정 요소에만 마우스 진입 이벤트를 처리하고 싶을 때 유용하다.
• 자식 요소 위로 마우스를 이동해도 부모 요소의 이벤트 핸들러는 실행되지 않는다.

 

 

 

---

 

mouseout() VS mouseleave()

마우스 커서가 특정 HTML 요소에서 벗어날 때 발생.

 

mouseout()

document.getElementById('parent').addEventListener('mouseover', function() {
    console.log('Mouse over parent element');
});

document.getElementById('child').addEventListener('mouseover', function() {
    console.log('Mouse over child element');
});

• 마우스 커서가 특정 요소나 그 자식 요소에서 벗어날 때 발생한다.
• 이벤트가 발생한 요소에서 상위 요소로 전파됩니다.
• 자식 요소와 부모 요소 사이의 마우스 이동을 감지해야 할 때 유용하다.
• 자식 요소에서 벗어날 때 부모 요소의 이벤트 핸들러도 실행된다.

 

 

mouseleave()

document.getElementById('parent').addEventListener('mouseenter', function() {
    console.log('Mouse enter parent element');
});

document.getElementById('child').addEventListener('mouseenter', function() {
    console.log('Mouse enter child element');
});

• 마우스 커서가 특정 요소에서 벗어날 때만 발생한다.
• 이벤트가 발생한 요소에서 상위 요소로 전파되지 않는다.
• 자식 요소와 상관없이 특정 요소에서 마우스 이탈 이벤트를 처리하고 싶을 때 유용하다.
• 자식 요소에서 마우스가 벗어나도 부모 요소의 이벤트 핸들러는 실행되지 않는다.