onClick

마우스를 뗄 때 이벤트를 실행

onMouseDown

마우스를 누를 때 이벤트를 실행

onMouseDown 사용 예시

회원가입 form 안에 두 개의 버튼이 있고 이메일 확인을 먼저 하고 싶은 경우

<form onSubmit={onJoinSubmit}>
  <div>
    <input type="email" />
      <button onMouseDown={onEmailConfirm}>이메일 확인</button>
   </div>
  .
  .
  .
  <input type='text' />
  <button onClick={onConfirm}>회원가입</button>
</form>

이메일 확인 버튼이 form 안에 있기 때문에 onClick 대신 onMouseDown 이벤트를 사용하여 폼이 제출되기 전에 이메일 값을 가져올 수 있도록 하는 것이 좋다.
onSubmit 이벤트 핸들러가 실행되기 전에 onMouseDown 이벤트가 실행되기 때문이다.

그 외 마우스 이벤트 종류

• onMouseUp
  사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생
• onDoubleClick
  사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생
• onMouseMove
  사용자가 해당 element에서 마우스를 움직였을 때 발생
• onMouseOver
  사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생
• onMouseOut
  사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생
• onMouseEnter
  사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생
• 버블링이 발생하지 않는다.
• onMouseLeave
  사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생
  버블링이 발생하지 않는다.
• onContextMenu
  마우스 오른쪽 버튼을 눌렀을 때 발생