답변:
mouseleave 이벤트는 이벤트 버블 링을 처리하는 방식에서 mouseout과 다릅니다. 이 예제에서 mouseout이 사용 된 경우 마우스 포인터가 Inner 요소 밖으로 이동하면 핸들러가 트리거됩니다. 이것은 일반적으로 바람직하지 않은 동작입니다. 반면에 mouseleave 이벤트는 마우스가 하위 항목이 아닌 바인딩 된 요소를 떠날 때만 핸들러를 트리거합니다. 따라서이 예제에서 핸들러는 마우스가 Inner 요소가 아닌 Outer 요소를 벗어날 때 트리거됩니다.
mouseout이보다 나은 선택이 있을 수 있습니다 mouseleave.
예를 들어의 요소 옆에 표시 할 도구 설명을 만들었다 고 가정 해 보겠습니다 mouseenter. setTimeout툴팁이 즉시 표시되지 않도록하는 데 사용 합니다. mouseleave사용시 시간 제한을 지우 clearTimeout면 마우스가 도구 설명을 벗어나면 표시되지 않습니다. 이것은 99 %의 시간 동안 작동합니다.
그러나 이제 도구 설명이 첨부 된 요소가 click이벤트 가있는 버튼 이고이 버튼이 사용자에게 confirm또는 alert상자를 표시한다고 가정 해 봅시다 . 사용자가 버튼을 클릭하면 alert화재가 발생합니다. 사용자가 툴팁이 팝업 될 기회가 없을 정도로 빠르게 눌렀습니다 (지금까지는 훌륭했습니다).
사용자가 alert상자 확인 버튼을 누르면 마우스가 요소를 떠납니다. 그러나 브라우저 페이지가 이제 잠금 상태이므로 확인 버튼을 누를 때까지 자바 스크립트 가 실행되지 않습니다 . 즉, mouseleave이벤트 가 실행되지 않습니다 . 사용자가 확인을 누르면 툴팁이 팝업됩니다 (원하는 내용이 아님).
mouseout이 경우 사용 하는 것이 적절한 솔루션이 될 것입니다.
mouseout이 경우 왜 발사 되는지 설명해 주 시겠습니까? 브라우저가 아직 잠긴 상태가 mouseout아닐까요?
jQuery API 문서 :
mouseout
이 이벤트 유형은 이벤트 버블 링으로 인해 많은 골칫거리를 유발할 수 있습니다. 예를 들어,이 예제에서 마우스 포인터가 Inner 요소 밖으로 이동할 때 mouseout 이벤트가 해당 요소로 전송 된 다음 Outer로 흘러갑니다. 이는 부적절한 시간에 바인딩 된 mouseout 핸들러를 트리거 할 수 있습니다. 유용한 대안은 .mouseleave ()에 대한 토론을 참조하십시오.
mouseleave위의 이유로 설계된 맞춤 이벤트도 마찬가지 입니다.
이벤트 Mouseout은 마우스가 선택된 요소를 떠날 때와 또한 마우스가 자식 요소를 떠날 때 트리거됩니다.
이벤트 Mouseleave 요소는 포인터가 선택한 요소 만 떠날 때 트리거됩니다.
참조 : W3School