mouseenter와 mouseover 이벤트의 차이점

마우스 이벤트 - mouseover vs mouseenter

안녕하세요, 이번시간에는 마우스 이벤트 mouseover와 mouseenter의 차이점을 알아보도록 하겠습니다. 이 두 메서드는 해당요소에 마우스를 올려놓았을 때 발생되는 이벤트 입니다.

window.addEventListener("mouseover",() => {})
window.addEventListener("mouseenter",() => {})

---

mouseover

mouseover는 이벤트 버블링 형식으로 동작합니다. 즉, 본인의 자식요소에 마우스를 가져다 놔도 본인의 자식요소부터 본인까지 이벤트가 전파됩니다.

---

mouseenter

mouseenter는 그와 반대로, 딱 본인요소에 해당하는 부분만 반응합니다.

---

반응형

결과

See the Pen mouseover vs mouseenter by kim-0617 (@kim-0617) on CodePen.