G. Mouse Leave & Mouse Out & Mouse Over

Mouseover

mouseover 이벤트는 흔히 우리가 html element에 마우스를 올렸을때 발생하는 이벤트다. 딸려오는 event 객체 안에는 event.target과 event.relatedTarget등 마우스가 어디로 들어왔고 어디서부터 들어왔는지 등의 레퍼런스를 갖고 있는 정보를 내포하고 있다. 마우스가 들어오고 나갔을때만 발생하는 이벤트고 움직임을 포착하기 위해서는 mouseover 후에 mousemove이벤트에 대한 처리를 해야한다.

Mouseout

mouseout 이벤트는 모든것이 mouseover 이벤트와 반대로 작동한다. 마우스가 들어올때가 아닌 나갔을때 발생한다는 차이가 있다.

Mouseenter & Mouseleave

mouseenter와 mouseover의 차이가 무엇인지 의아할 수도 있다. 결정적인 차이는 mouseover은 한 element에 대해서만 동작하지만 mouseenter은 child node 들을 포함한 node에 대해서 동작한다. 예를들어서 div.inner을 감싸고 있는 div.outer이 있다고 치면, mouseenter과 mouseover 모두 밖에서 div.outer로 마우스가 올라갔을때 동작하지만, 마우스가 div.inner위로 올라가면 mouseout 이벤트가 발생한다. 반면에 mouseleave는 div.outer을 완전히 마우스가 나갔을때만 동작한다. 경우에 따라서 맞춰서 써야하는 이벤트 종류들이다.

참고자료: 마우스 이벤트 상세 정보