[자바스크립트] 마우스 이벤트(mouse event)의 종류

1. click 

해당 요소에서 마우스를 클릭! 했을 때

See the Pen by Seoyoon Park (@yeleepark) on CodePen.

 

2. dblclick

해당 요소에서 마우스를 더블 클릭! 했을 때

See the Pen by Seoyoon Park (@yeleepark) on CodePen.

 

3. mousedown / mouseup

해당 요소에서 마우스가 눌러진 상태일 때 / 떼었을 때

See the Pen by Seoyoon Park (@yeleepark) on CodePen.

 

5. mousemove

해당 요소에서 마우스가 움직일 때

See the Pen by Seoyoon Park (@yeleepark) on CodePen.

 

6. mouseover

해당 요소에서 마우스가 요소 안으로 들어올 때
현재 블랙 div에 이벤트가 걸려있는데 자식요소인 핑크 div에도 버블링 되네요,,

See the Pen by Seoyoon Park (@yeleepark) on CodePen.

 

7. mouseout

해당 요소에서 마우스가 요소 밖으로 나갔을 때
현재 블랙 div에 이벤트가 걸려있는데 자식요소인 핑크 div에도 버블링 되네요,,222,,,

See the Pen by Seoyoon Park (@yeleepark) on CodePen.

 

8. mouseenter

해당 요소 밖에서 마우스가 안으로 들어왔을 때!
mouseover와 차이점은 자식 요소에는 동작하지 않는다는 점!
현재 블랙 div에 mouseenter 이벤트가 적용되어 있으므로 자식 요소인 핑크 div에는 이벤트가 적용 안 되는 것을 확인 가능하죠 ,,

See the Pen by Seoyoon Park (@yeleepark) on CodePen.

9. mouseleave

해당 요소에서 마우스가 밖으로 나갔을 때!
mouseout과 차이점은 자식요소에서는 동작하지 않는다는 점!
현재 블랙 div에 mouseenter 이벤트가 적용되어 있으므로 자식 요소인 핑크 div에는 이벤트가 적용 안 되는 것을 확인 가능하죠 222,,

See the Pen by Seoyoon Park (@yeleepark) on CodePen.

 

10. contextmenu

마우스 우클릭을 했을 때!
블로그에서 우클릭이 안되는 관계로 따로 예제는 없습니다
하지만 이런 이벤트가 있다는건 알아두기! 🧐