마우스 이벤트

hover이벤트 사용시 마우스가 영역을 벗어날 때 클래스가 빠르게 추가/제거되며 번쩍이는 현상이 발생

🤔button의 영역은 충분한데 왜?
-> 팝업/내용이 숨겨지면 마우스는 다시 버튼 위에 있거나 버튼과 팝업 사이의 빈 공간 위에 있게 되고, 이 과정이 매우 빠르게 반복되며 번쩍이는 현상이 발생!!

처음에는 mouseover를 이용해서 작업했지만 반복되는 오류

📌 mouseenter, mouseleave

mouseenter() 이벤트 메서드 는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생시킴.
mouseleave() 이벤트 메서드 는 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킴.

event.relatedTarget

: 마우스가 떠난 직후 포커스 또는 호버 상태가 되는 요소를 나타냅니다.

$(event.relatedTarget).closest('...')

: 마우스가 떠난 곳이 버튼 또는 감싸는 요소(footer-pop-wrap) 안인지 확인

! ... .length

: 마우스가 떠난 곳이 지정된 영역(버튼 또는 팝업 영역)의 바깥인 경우에만 true가 됩니다.

	mouseover	mouseenter
자식 요소	자식 요소 진입 시에도 이벤트가 발생 (자식 요소에 포커스 이동 시)	자식 요소 진입 시에는 이벤트가 발생하지 않음
이벤트 전파	버블링(Bubbling) O (부모 요소로 전파됨)	버블링(Bubbling) X (부모 요소로 전파되지 않음)

mouseleave 해당영역의 부모영역을 기준으로 작업함

$('.footer-pop').mouseleave(function(e){
        if(!$(e.relatedTarget).closest('.footer-pop').length) {
        $('.footer-pop-cont').removeClass('on');
        }
    })