# mouseEvent

ony_

https://stackoverflow.com/questions/9262741/what-is-the-difference-between-pagex-y-clientx-y-screenx-y-in-javascript 1. ClientX, ClientY 현재 보여지는 브라우저 화면 뷰포트 기준으로 가로, 세로 좌표를 반환 2. OffsetX, OffsetY 이벤트 대상을 기준으로 상대적인 좌표를 반환 ex) 화면 중앙의 박스 요소에서 클릭한 위치를 찾으면 박스위 왼쪽 모서리 좌표가 0으로 측정됨 3. pageX, pa

huiseon37

현재 활동하고있는 대학생 연합 IT창업동아리 SOPT의 3주 단기해커톤에서 ‘드래그미' 서비스의 웹 프론트 개발자로 함께하게 되었다. 드래그미 서비스의 메인 기능은 서비스 명에서도 알 수 있듯이 드래그 기능이다. 나는 그 중에서도 타임 블럭들을 드래그 하면 시간을 계획 할 수 있는 컴포넌트를 담당하여 개발했다. 완성된 컴포넌트는 다음과 같다. 왜 Drag Event를 사용하지 않았나 드래그 앤 드랍 기능을 Mouse Event로 사용하게 된 이유에는, 먼저 Drag Event가 해당 컴포넌트의 기능과 적합하지 않다고 생각했기 때문이다. 먼저, java

jeonbyeongmin

서론 시간표와 관련된 프로젝트에서 ` 요소를 마우스로 드래그해서 선택해야 하는 기능이 필요했습니다. 기능 구현을 위해 리서치를 진행했습니다. 유사 라이브러리에서 MouseEvent 및 TouchEvent` 를 활용하는 방식으로 구현되어 있었습니다. 저 또한 이 기능을 구현하기 위해서 마우스 이벤트 및 터치 이벤트를 활용하기로 결정했습니다. 하지만 개발자는 어떻게 사용자가 드래그를 하고 있다고 판단할 수 있죠? 생각해보니 마우스 이벤트와 터치 이벤트에 대해 깊게 공부해본 적이 없다는 것을 깨닫게 되었습니다. 그토록 사용해온 click 이벤트가 MouseEvent 임에도 불구하고 말입니다! 기능 구현하기 위해 마우스 및 터치 이벤트에 대해 알아볼 필요가 있었습니다. 이번 포스트에서는 '드래그로 선택 가능한 테이블' 개발 과정 및 리팩토링 과정을 소개합니다. 또 겸사겸사 정리했던 마우스 이벤트 및 터치 이벤트에 대해서 소개합니다.

rlwjd31

🍀 Event event의 사전적인 의미는 사건 이란 의미가 있다. 필요한 물품을 샀을 때 통장에서 돈이 빠져나가는 사건이 일어난다…🥲 돈이 빠져나가서 통장에 잔고가 얼마 없다면 어떻게 할까? 이 때 내가 할 수 있는 행동(처리)는 아래와 같은 옵션들이 있을 것이다. > event occur 돈이 없어지면 > option1 아낀다 > option2 일을 해서 번다 > option3 뻐긴다 > option4 사려고 한 목록 중 몇 개를 없앤다 > … > optionN 이렇게 보면 사건과 처리로 생각할 수 있다. > 사건: 돈이 빠져나감 > 처리: 돈이 생길 때까지 뻐김… 웹에서도 event란 같은 의미이다. 좀 더 구체적으로 말하자면 웹에서의 이벤트는 사용자가 웹 브라우저에서 발생시키는 사건을 뜻한다. 아래는 사용자가 웹에서 이벤트를 발생시키는 예시들이다. 브라우저에서 마우스 움직임 브라우저에서 마우스로 클릭할 때 브라우저 창 사이즈를 줄이거

commi1106

MouseOver, MouseEnter 이벤트? 통상적인 브라우저가 감지할 수 있는 MouseEvent 종류 중에서 mouseOver 와 mouseEnter에 대해서 정리해본다. mouseOver와 mouseEnter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트는 mouseOut과 mouseLeave다. 일반적으로 mouseOver는 mouseOut와 짝을 이루고, mouseEnter는 mouseLeave와 짝을 이루어 사용한다. > 주로 아래와 같이 짝을 이루어 사용한다. mouseOver mouseOut mouseEnter mouseLeave MouseOver와 MouseEnter 차이 두 이벤트를 유사하지만 이벤트 전파(event propagation)와 취소 가능성(cancelable)에 큰 차이가 있다. **mouseOver