본문으로 바로가기

mouseover vs mouseenter

이 포스팅에서는 마우스오버 이벤트와 마우스엔터 이벤트의 차이점에 대해 알아봅니다.




mouseover 와 mouseenter의 차이점은 이벤트 버블링에 있습니다.

다음의 소스뷰를 살펴보도록 합니다.

See the Pen 마우스오버와 마우스엔터 차이 by jaeheekim (@jaehee) on CodePen.


위의 영역의 오렌지와 핑크에 마우스를 올렸다 내렸다하면 마우스오버와 마우스엔터 이벤트를 발생시킬 것입니다.

mouseover 이벤트는 이벤트 버블링이 적용되는 이벤트이기 때문에 내부의 div 태그 안에 들어가도 이벤트를 또 다시 발생시킵니다.

반면에, mouseenter 이벤트는 문서 객체의 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생하게 됩니다.


버블링에 대해 좀더 자세히 살펴보려면 아래의 참고 링크를 살펴보시기 바랍니다.




Jaehee's WebClub




댓글을 달아 주세요