이번 과제는 drag & drop API 사용하지 않고 todo list drag를 구현해야 했습니다.
이전에 저는 아래 사진과 같이 드래그를 이용해서 간단한 페이지 디자인이나 다이어그램을 만들어 주는 사이트를 만들려고 도전했었는데 아쉽게도 마우스 이벤트랑 친해지지 못해서.... 프로젝트를 실패로 끝냈던 기억이 나네요!
그래서 이번 프로젝트에서 마우스 이벤트만으로 drag & drop 을 구현하라고 하셨을 때 이전에 실패했던 프로젝트가 생각나 걱정이 좀 컸던것 같아요 ..😭😭
또 다시 실패 할 수는 없기에 이번에는 복수하는 마음으로다가 마우스 이벤트를 아주 샅샅이 흩어볼려고 합니다...!🔥
다들 아시는 내용이라고 생각되고 제 글을 통해서 다들 마우스 이벤트에 대해서 상기 할 수 있는 계기가 되었으면 하는게 제 글의 목표입니다 !
https://ko.javascript.info/ 를 참고하자면
이벤트(event) 는 무언가 일어났다는 신호입니다. 모든 DOM 노드는 이런 신호를 만들어 냅니다. 이 말인즉슨 저희는 모든 DOM 노드에 이 마우스 이벤트를 추가 하여 이벤트 발생 시 원하는 작업을 할 수 있다는 말이 됩니다. 참고로, 이벤트는 DOM에만 한정되진 않다고 합니다 👍
이번 데모때 Bug Hunter 🏹 님이 마우스 오른쪽 클릭으로 저희조를 아주 박살내고 가셨는데.... 다음에는 요 contextmenu 이벤트를 이용해서 아에 마우스 오른쪽 버튼 이벤트를 금지시켜야겠네요...
아! 이런 나쁜 방법 말고도 이 이벤트를 이용하면 마우스 오른쪽 버튼을 클릭했을 때 저희가 커스터마이징 한 옵션 창을 띄어주면 좋은 사용자 경험을 만들 수 있을것도 같군요!
마우스 이벤트에는 좌표에 접근하는 방법이 아래와 같이 너무나도 많고 햇갈려서 화가날 지경입니다... 😨
자주 사용하는 접근 방법에 대해서 정리해보았고 차이점 비교를 해봤습니다!