이벤트 mouseover, mouseout, mouseenter, mouseleave_javascript 스킬의 차이점에 대해

최근 온라인 시험이나 강좌몰에서 이런 문제가 발생했습니다. 마우스가 현재 레이어로 슬라이드되면 하위 버전 브라우저에서 마우스오버 및 마우스아웃이 깜박이는 현상이 많이 있습니다. 이 현상을 해결하는 방법이 있지만 가장 간단한 것 중 하나는 mouseover와 mouseout을 해당 mouseenter와 mouseleave로 바꾸는 것입니다.

mouseover 이벤트는 마우스 포인터가 요소 위에 있을 때 발생합니다.

이 이벤트는 mouseout 이벤트와 함께 가장 자주 사용됩니다.

참고: mouseenter 이벤트와 달리 mouseover 이벤트는 마우스 포인터가 선택한 요소나 하위 요소를 통과할 때 트리거됩니다. mouseenter 이벤트는 마우스 포인터가 선택한 요소 위로 지나갈 때만 발생합니다.

참고: mouseleave 이벤트와 달리 mouseout 이벤트는 마우스 포인터가 선택한 요소 또는 하위 요소를 벗어나는지 여부에 따라 트리거됩니다. mouseleave 이벤트는 마우스 포인터가 선택한 요소를 떠날 때만 트리거됩니다. 데모를 보려면 아래 예를 참조하세요.

mouseenter 이벤트는 마우스 포인터가 요소를 통과할 때 발생합니다. 이 이벤트는 mouseleave 이벤트와 함께 가장 자주 사용됩니다.

참고: 마우스 포인터가 선택한 요소의 하위 요소를 통과할 때도 mouseover 및 mouseout 이벤트가 트리거됩니다. 이벤트 바인딩 시 가끔 마우스오버 마우스아웃 이벤트로 인해 예상치 못한 버그가 발생할 수 있습니다

마우스 오버 및 마우스 입력

마우스 포인터가 선택한 요소나 하위 요소를 통과할 때마다 마우스오버 이벤트가 트리거됩니다.

mouseenter 이벤트는 마우스 포인터가 선택한 요소를 통과할 때만 트리거됩니다.

마우스아웃과 마우스리브

mouseout 이벤트는 마우스 포인터가 선택한 요소 또는 하위 요소를 벗어나는지 여부에 따라 트리거됩니다.

mouseleave 이벤트는 마우스 포인터가 선택한 요소를 떠날 때만 트리거됩니다.