자바스크립트 - 이벤트 객체 mouseover VS mouseenter

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

mouseover / mouseenter : element에 마우스를 올려둘 때

-> 현재 element 영역 및 element에 속한 자식 요소 포함

mouseover 와 mouseenter의 차이점은 이벤트 버블링에 있습니다.
다음의 소스뷰를 살펴보도록 합니다.

css는 쓰다가.. 귀찮음을 이기지 못해 아래가 정리가 안 된 상태라 코드를 남기겠습니다.

body {
  width: 500px;
  margin: 30px auto;
}
.outer {
  width: 200px;
  height: 200px;
  background: Orange;
  padding: 50px;
  margin: 10px;
}

.inner {
  width: 100%;
  height: 100%;
  background: Pink;
}

아래와 같이 상자가 생기고 마우스가 상자 밖, 안에서 움직일 때 마다 아래와 같은 결과가 나옵니다.

위의 영역의 오렌지와 핑크에 마우스를 올렸다 내렸다하면 마우스오버와 마우스엔터 이벤트를 발생시킬 것입니다. mouseover 이벤트는 이벤트 버블링이 적용되는 이벤트이기 때문에 내부의 div 태그 안에 들어가도 이벤트를 또 다시 발생시킵니다.

 

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