mouseover & mouseenter 이벤트에 대해서 알아볼까?

mouseenter/mouseover의 차이점에는 무엇이 있을까?

비슷한듯 다른 두 이벤트는 각각 미세한 차이가 있는데요 한번 이번 시간에는 그 차이에 대하여 알아보겠습니다 ^^v
이해를 돕기위해 가시적인 부분을 생각하여 좌표값도 넣어주었습니다

---

mouseover

"mouseeover" 이벤트는 직접 이벤트를 걸지 않은 자식 요소에 마우스 포인터가 와도 발생하는 이벤트 입니다.

예시:: mouseover - 어느곳에 마우스를 가져다 대도 계산됩니다.

마우스를 올려보세요!

[마우스가 올라오면 숫자가 카운팅 됩니다!]

• clientX : 0px
• clientY : 0px
• offsetX : 0px
• offsetY : 0px
• pageX : 0px
• pageY : 0px
• screenX : 0px
• screenY : 0px

예제용 코드 보기

const testBox = document.querySelector(".test_box")
let i = 0;

//마우스가 들어왔다면
testBox.addEventListener("mouseover", (event) => {
    document.querySelector(".clientX").innerHTML=event.clientX;
    document.querySelector(".clientY").innerHTML=event.clientY;
    document.querySelector(".offsetX").innerHTML=event.offsetX;
    document.querySelector(".offsetY").innerHTML=event.offsetY;
    document.querySelector(".pageX").innerHTML=event.pageX;
    document.querySelector(".pageY").innerHTML=event.pageY;
    document.querySelector(".screenX").innerHTML=event.screenX;
    document.querySelector(".screenY").innerHTML=event.screenY;
    document.querySelector(".test_text").innerHTML="[mouseover 실행] 마우스가 올려졌구요~";
    
    //숫자 카운팅을 위한 i값 증가
    i++
    if(i<=100){
        document.querySelector(".text").innerHTML=i+"번";
    }else{
        document.querySelector(".text").innerHTML=i+"번"+"째야 이제 그만돌려줘~~~~";
    }
})

//마우스가 나온다면
testBox.addEventListener("mouseout", (event) => {
    document.querySelector(".test_text").innerHTML="[mouseout 실행] 마우스가 빠져나왔네용";
    
})

---

mouseenter

"mouseenter" 이벤트는 요소에 마우스 포인터가 진입하기만 해도 바로 발생하게 되며 어떤 html 요소가 있던간에 이 이벤트를 실행시킬 수 있으나 정해진 요소에만 이벤트 발생이 가능합니다.

예시:: mouseenter - 마우스 이벤트를 설정해놓은 영역에만 계산됩니다.

마우스를 올려보세요!

[마우스가 올라오면 숫자가 카운팅 됩니다!]

• clientX : 0px
• clientY : 0px
• offsetX : 0px
• offsetY : 0px
• pageX : 0px
• pageY : 0px
• screenX : 0px
• screenY : 0px

예제용 코드 보기

const testBoxTwo = document.querySelector(".two")
let q = 0;

//마우스가 들어왔다면
testBoxTwo.addEventListener("mouseenter", (event) => {
    document.querySelector(".two .clientX").innerHTML=event.clientX;
    document.querySelector(".two .clientY").innerHTML=event.clientY;
    document.querySelector(".two .offsetX").innerHTML=event.offsetX;
    document.querySelector(".two .offsetY").innerHTML=event.offsetY;
    document.querySelector(".two .pageX").innerHTML=event.pageX;
    document.querySelector(".two .pageY").innerHTML=event.pageY;
    document.querySelector(".two .screenX").innerHTML=event.screenX;
    document.querySelector(".two .screenY").innerHTML=event.screenY;
    document.querySelector(".test_text_two").innerHTML="[mouseover 실행] 마우스가 올려졌구요~";
    
    //숫자 카운팅을 위한 i값 증가
    q++
    if(q<=100){
        document.querySelector(".text_two").innerHTML=q+"번";
    }else{
        document.querySelector(".text_two").innerHTML=q+"번"+"째야 이제 그만돌려줘~~~~";
    }
})

//마우스가 나온다면
testBoxTwo.addEventListener("mouseleave", (event) => {
    document.querySelector(".test_text_two").innerHTML="[mouseout 실행] 마우스가 빠져나왔네용";
    
})