마우스 이벤트 종류

mousedown / mouseup
마우스를 누를때/땔 때

mouseover / mouseout
마우스 포인터가 요소 위에 있을 때/ 요소 위에서 나갈 때.
마우스 포인터가 포커스이므로 요소 내부에서 하위 항목으로의 전환도 체크가 됩니다. 버블링도 되구요.
마우스가 움직일 때마다 이벤트가 발생하는 게 아니라 시간마다 체크하는 거라 skip되는 엘리먼트가 있을 수 있습니다.

mouseover일 때,
event.target : 마우스가 온 요소를 가리킴
event.relatiedTarget: 마우스가 왔었던 요소를 가리킴

mouseout일 때,
event.target: 마우스가 떠난 요소
event.relatedTarget: 마우스가 떠나서 새롭게 간 요소

mouseenter/ mouseleave
요소 위에 마우스 포인터가 왔을 때/ 갔을 때.
요소가 포커스이므로 요소 내부의 하위 항목으로의 전환은 계산하지 않습니다. 버블링되지 않습니다.
버블링이 되지 않아 이벤트 위임이 안됩니다.

mousemove
마우스가 움직일 때.

마우스는 움직일 때마다 단일 요소 위에만 있습니다.

contextmenu
마우스 오른쪽 버튼을 누를 때

click
클릭할 때

dbclick
더블 클릭할 때

which

어떤 마우스 버튼을 눌렀는지에 대한 정보.

event.which == 1 : left button
event.which == 2 : middle button
event.which == 3 : right button

key와 조합된 마우스 이벤트

event.shiftKey
event.altKey(option for Mac)
event.ctrlKey
event.metaKey(command for Mac)

좌표

window-relative: event.clientX, event.clientY
document-relative: event.pageX, event.pageY

disabling selection

Before...
<b ondblclick="alert('Click!')" onmousedown="return false">
  Double-click me
</b>
...After

preventing copying

아예 복사를 못하게 막고 싶을 땐 oncopy이벤트가 있습니다.

<div oncopy="alert('Copying forbidden!');return false">
  Dear user,
  The copying is forbidden for you.
  If you know JS or HTML, then you can get everything from the page source though.
</div>

드래그앤드랍

dragstart
dragend
mousedown -> mousemove -> mouseup으로 구현.