마우스 이벤트 mouseover/mouseout VS mouseenter/mouseleave 차이점
스크립트 중 하나인 제이쿼리의 이벤트 중에 마우스와 관련된 내용입니다. 보통 마우스를 올리고 뺄 때 마우스오버(mouseover), 마우스아웃(mouseout)을 사용한다고 배웠습니다. 이와 비슷한 메서드 중에서 마우스엔터(mouseenter)와 마우스리브(mouseleave)가 있는데, 이 두가지의 차이점을 알아보도록 하겠습니다.
먼저 결론부터 말씀드리자면, 자식 요소들까지 영향을 주느냐 안 주느냐의 차이 입니다. 깊이의 차이라고 할 수 있습니다. 마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 차이라고 이해하시면 좋을 것 같습니다.
MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됨
MouseEnter/Leave : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨
대략 이렇게 설명드릴 수 있겠습니다. 아래의 예시를 보시고 참고해 주시기 바랍니다.
See the Pen jQuery: mouseover/mouseout VS mouseenter/mouseleave by rgy0409 (@rgy0409) on CodePen.
지금 두개의 div 박스가 있고, 안쪽에는 글씨가 있습니다. 안쪽에는 p태그가 있는데 바로 글씨 부분입니다. 결론은 div가 부모요소, p태그가 자식요소라고 할 수 있습니다. 코딩 상태를 확인해 보시려면 HTML, CSS, JavaScript 버튼을 눌러보시면 되며, 오른쪽 하단에 Return(초기화) 버튼으로 다시 시작을 할 수 있습니다. 마우스가 올라가면 글씨 부분이 연두색 배경이 채워지고, 빠져나가면 해당 연두색 영역의 테두리가 빨간색으로 변하게 설정되어 있습니다.
1번 : mouseover/mouseout 이벤트
1번 div의 경우는 회색 영역에만 영향을 줍니다. 1번의 경우는 마우스를 우선 회색 div 범위내에 올리면 p태그로 감싸여 있는 글씨 부분의 배경이 연두색으로 변하는걸 확인하실 수 있습니다. 그리고 다시 연두색 영역인 p태그 영역으로 마우스를 가져다 놓으면 최종적으로 빨간색 선이 생기는걸 확인하실 수 있습니다. 결론은 회색 div 영역에만 마우스 이벤트가 발생된다는것을 확인할 수 있습니다.
2번 : mouseenter/mouseleave 이벤트
2번의 경우는 우선 마우스를 올리면 글씨 부분의 배경이 바뀌는게 1번과 똑같습니다. 그러나 글씨 부분까지 마우스가 들어가도 변하지 않습니다. 2번의 div를 완전히 빠져나와야 마우스가 나갔을 때의 이벤트가 실행됩니다. 결론은 p태그까지도 영향을 끼친다는 것을 확인할 수 있습니다.
이 마우스에 대한 이벤트는 div 요소에 적용시켰습니다. 결론은 자식요소까지 영역을 넓히려면 mouseenter/mouseleave 이(가) 아닌, mouseover/out 을(를) 사용해야 한다는 것을 알 수 있습니다. CSS에서는 hover와 같은 역할인 샘 입니다. 끝.
"친절한효자손 취미생활" 을 검색!
