[자바스크립트] mouseover & mouseout, mouseenter & mouseleave, 마우스 이벤트의 종류와 차이점


[자바스크립트] mouseover & mouseout, mouseenter & mouseleave, 마우스 이벤트의 종류와 차이점

div 두개의 영역이 외부 내부로 있고 각각에 마우스 이벤트를 달아 차이점을 비교해본다. mouseover & out 마우스 이벤트 중 over와 out은 부모와 자식의 노드를 따로 분리된 영역으로 판단한다. 이벤트 정보가 담길 info에 이벤트 횟수와 해당 이벤트가 일어난 타겟의 위치를 표시한다. 바깥의 parent영역만 들어갔다 나왔을 시 over와 out이 출력된다. 이번엔 parent영역에서 child영역까지 들어갔다가 나왔다. 3번에서 parent 에 들어갔고 여기서 child로 들어갈 때 parent out이 뜨고 child over이 뜬다. 이말인 즉 child로 들어갈 때는 parent에서 나가는 것으로 판단되는 것이며 child는 parent하위 개체임에도 불구하고 독립된 영역으로 취급받..


원문링크 : [자바스크립트] mouseover & mouseout, mouseenter & mouseleave, 마우스 이벤트의 종류와 차이점