mouseover vs mouseenter
이 포스팅에서는 마우스오버 이벤트와 마우스엔터 이벤트의 차이점에 대해 알아봅니다.
mouseover 와 mouseenter의 차이점은 이벤트 버블링에 있습니다.
다음의 소스뷰를 살펴보도록 합니다.
See the Pen 마우스오버와 마우스엔터 차이 by jaeheekim (@jaehee) on CodePen.
위의 영역의 오렌지와 핑크에 마우스를 올렸다 내렸다하면 마우스오버와 마우스엔터 이벤트를 발생시킬 것입니다.
mouseover 이벤트는 이벤트 버블링이 적용되는 이벤트이기 때문에 내부의 div 태그 안에 들어가도 이벤트를 또 다시 발생시킵니다.
반면에, mouseenter 이벤트는 문서 객체의 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생하게 됩니다.
버블링에 대해 좀더 자세히 살펴보려면 아래의 참고 링크를 살펴보시기 바랍니다.
Related Info
Jaehee's WebClub
'JavaScript > JS 활용 & etc..' 카테고리의 다른 글
| (function (window, document, undefined) {})(window, document); 의 진짜 의미 (0) | 2016.09.29 |
|---|---|
| keyup 이벤트 알아보기 (0) | 2016.09.29 |
| Event flow & Event Handling (0) | 2016.09.29 |
| [자바스크립트] 이벤트 모델의 전파 과정 (0) | 2016.09.29 |
| 함수 선언문과 함수 표현식에서의 세미콜론(;) (0) | 2016.09.29 |
