자바스크립트(JavaScript) 마우스 클릭 이벤트onclick/ondbclick/onmousedown/onmouseup

오늘은 자바스크립트 공부가 부족하다고 생각하여 공부하는 도중에 마우스 클릭 이벤트에 대해 확실히 이해하려고 공부해보았습니다.

auxclick: 이 이벤트는 마우스 왼쪽버튼을 제외한 다른 버튼을 클릭했을 때 작동한다. 오른쪽 버튼, 휠버튼, 다른 매크로 버튼 등이 이 이벤트를 작동시킨다.

click: 마우스 좌클릭에 의해 작동된다.

contextmenu: 마우스 우클릭 시 나오는 context menu가 사용자의 화면에 보여지기 전에 작동된다.

dblclick: 더블 클릭시 작동됨.

mouseup/mousedown: mousedown은 mouse 클릭 유지 시, mouseup은 클릭 유지를 풀었을 때 작동된다.

이 event는 좌클릭 뿐만 아니라 어떠한 버튼 클릭에도 됨.

mouseenter/mouseleave: 마우스 포인터가 element 내부에 들어갈 때/나올 때 작동됨.

mouseover/mouseout: mouseenter/mouseleave와 같은 방식의 event이지만, 해당 EventListener가 적용된 element의 children에게도 적용됨.

mousemove: 마우스 포인터가 element 위에서 움직일 때 작동됨.

select: text가 선택됐을 때(드래그) 작동. 이 event는 element가 <input>태그 중 type이 text, textarea일 때만 작동됨.

wheel: 사용자가 휠을 작동시킬 때 작동됨.

1. 먼저 아래의 코드처럼 html 파일을 작성해줍니다.

2. 자바스크립트 파일을 작성해줍니다.

3. 그냥 버튼은 밋밋해보여서 버튼에 대해 style을 css파일을 작성하여 적용하였습니다.