🗣️ addeventlistener를 사용해 다양한 마우스 이벤트를 줄 수 있는데 이벤트 종류에 대해 알아봅시다!
📌 mouseover, mouseout, mouseenter, mouseleave
✏️ .box의 효과
✔️ mouseout - 마우스가 요소를 벗어날 때 발생
✔️ mouseover - 마우스를 요소 안에 들어올 때 발생
✏️ .BOX의 효과
✔️ mouseenter - 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생
✔️ mouseleave - 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
✏️ 자식 요소까지 인식하는지에 따라 차이가 있다
mouseover, mouseout는 자식 요소에 접근해도 동작한다.
mouseenter, mouseleave는 자식 요소에는 동작하지 않는다.
📌 버블링
하나의 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. mouseover, mouseout에는 이벤트 버블링이 적용되어 포함된 어디를 들어가도 자식요소에게까지 이벤트를 발생시킨다.
💡 따라서 자식요소에 이벤트를 주고 싶다면 mouseover, mouseout를 사용하고, 자식 요소에는 영향을 끼치지 않고 해당 요소에만 이벤트를 줄때는 mouseenter, mouseleave를 사용하면 됩니다!
효율을 생각하는 프론트엔드 개발자