마우스 이벤트 연습하기

타켓요소.addEventListener('이벤트타입', 리스너 콜백함수, 이벤트단계(useCapture));

-이벤트 타입은 on을 생략한 이름을 넣는다. ex) onclick (X) , click(O)

-같은 요소에 이벤트를 여러개 등록할 수 있다.

-removeEventListener메서드로 이벤트를 삭제할 수있다.

※단, 리스너로 익명함수가 등록된 경우엔 removeEventListener 메서드를 호출해서 지울 순 없고

addEventListener에 등록된 익명함수 내에서removeEventListener를 호출하고 두번째 인자로 arguments.callee를 넣어줘야 함.

---

본론

마우스 이벤트 종류)

1. click - 클릭 
2. dbclick - 더블클릭
3. mousedown -마우스를 클↘릭↘ 하고 누르고있는 상태
4. mouseup - 마우스 클릭한 상태에서 손을 뗄↗ 때.
5. mousemove -마우스를 클릭한 상태에서 움직일 때.
6. mouseover - 특정 요소에 마우스를 올릴 때.
7. mouseout -  특정 요소에 mouseover 되어 있는 상태에서 마우스가 요소 벗어날 때.
8. contextMenu - 마우스 우클릭
9. 드래그앤그롭 - dragstart ( == drag ) / dragend / dragenter / dragover / dragleave / drop

---

박스 드래그 예제) mousedown, mouseup, mousemove 

See the Pen ZEGEJwb by volt-nuna (@ddonni0426) on CodePen.

---

예제) mouseover mouseout /dragstart,dragend

See the Pen OJMzZjv by volt-nuna (@ddonni0426) on CodePen.

예제 만들어 보면서 알았지만 drag 이벤트는 그 요소 안에서의 드래그를 말한다.