210817 TIL

TIL DAY 21

오늘 배운 일

✔️ 코드잇에서 JavaScript 중급

• 마우스 버튼 이벤트

• click : 마우스 왼쪽 버튼을 클릭했을 시
• contextmenu : 마우스 오른쪽 버튼을 클릭했을 시
• dblclick : 두번 클릭했을때
• mousedown : 마우스 버튼을 누른 순간
• mouseup : 마우스 버튼을 눌렀다 뗀 순간

이벤트.button

• 0: 마우스 왼쪽 버튼
• 1: 마우스 휠
• 2: 마우스 오른쪽 버튼

예제)

출처 : 코드잇

결과값 :

• 이벤트 button효과를 이용해서 문제를 풀었다.

왼쪽 버튼을 클릭했을시...

오른쪽 버튼을 클릭했을시...

• 마우스 이동 이벤트

mousemove : 마우스 포인터가 이동할 때
mouseover : 마우스 포인터가 요소 밖에서 안으로 이동할 때
mouseout : 마우스 포인터가 요소 안에서 밖으로 이동할 때

MouseEvent.clientX, clientY
화면에 표시되는 창 기준 마우스 포인터 위치

• 보이는 화면 기준의 너비와 높이

MouseEvent.pageX, pageY
웹 문서 전체 기준 마우스 포인터 위치

• 문서 전체의 너비와 높이

MouseEvent.offsetX, offsetY
이벤트가 발생한 요소 기준 마우스 포인터 위치

• 요소의 너비와 높이

그림으로 쉽게 이해하기!

출처 : 코드잇

느낀점 :

• 오늘은 마우스 이벤트에 대해 배워봤는데, 클릭만 있는게 아니라 다양한 이벤트가 존재해서 좋은 시너지 효과를 보여줄 것 같다.