mouseover와 mouseenter 차이점

 

 

mouseover / mouseout	마우스 커서가 노드에 들어올 경우(mouseover), 노드 밖으로 나갈 경우(mouseout) 발생하는 이벤트 만약 자식 노드가 있을 경우 자식 노드에 마우스 커서가 들어가면 이벤트가 발생 즉 부모 노드와 자식 노드는 각각 독립적인 노드로 처리된다.
mouseenter /  mouseleave	마우스 커서가 노드에 들어올 경우(mouseenter) 노드밖으로 나갈 경우(mouseleave) 발생하는 이벤트 만약 내부에 자식 노드가있다면 자식 노드에서는 이벤트가 발생하지 않는다. 즉 자식 노드는 부모노드에 일부로 간주한다.

 

 

See the Pen mouseover mouseenter 차이 by sel (@sellttu) on CodePen.

 

 mouse out과 mouse leave에 각각 마우스를 움직여보면 차이를 알 수 있다.

mouseover / mouseout이 설정된 블럭은 부모노드 와 자식노드를 왔다갔다 할 경우에도 카운트가 올라가는 반면

mouseenter / mouseleave는 부모노드를 나갔다가 다시 들어가기 전까지는 카운트가 올라가지 않는다.

 

 

 

참고 :  https://api.jquery.com/