이벤트 자세히 다뤄보기

1. MouseEvent.button

마우스 이벤트 객체의 버튼 프로퍼티를 활용하면, 마우스 버튼을 눌렀을 때 일어난 이벤트에 대해서 어떤 버튼을 눌러서 일어난 이벤트인지를 정확하게 알아낼 수 있다.

값	내용	MouseEvent.type
0	마우스 왼쪽 버튼	click	마우스 왼쪽 버튼을 눌렀을 때
1	마우스 휠	contextmenu	마우스 오른쪽 버튼 눌렀을 때
2	마우스 오른쪽 버튼	dbclick	더블클릭 (동일 버튼 두번 누르기)
3	X1 (일반적으로 브라우저 뒤로 가기 버튼)	mousedown	마우스 버튼을 누른 순간
4	X2 (일반적으로 브라우저 앞으로 가기 버튼)	mouseup	마우스 버튼을 눌렀다 뗀 순간

동작을 하나 하더라도 여러 이벤트가 동시에 일어날 수 있다. 예를 들어 클릭을 한번 하더라도, mousedown, mouseup, click까지 3개의 이벤트가 발생하게 된다. 이렇게 동시에 일어날땐 각각의 순서에 대해서 잘 이해하는게 중요하다. 더블클릭의 경우엔 mousedown, mouseup, click, mousedown, mouseup, click, dbclick 순으로 이벤트가 발생되기 때문에 잘 생각해보자.

+ 참고로 mouseenter, mouseleave, mouseover, mouseout, mousemove 처럼 마우스 이동과 관련된 이벤트에서는 이 값이 null이나 undefined가 아니라 0이다.

---

2. MouseEvent.type

이벤트 타입	설명
mousedown	마우스 버튼을 누르는 순간
mouseup	마우스 버튼을 눌렀다 떼는 순간
click	왼쪽 버튼을 클릭한 순간
dblclick	왼쪽 버튼을 빠르게 두 번 클릭한 순간
contextmenu	오른쪽 버튼을 클릭한 순간
mousemove	마우스를 움직이는 순간
mouseover	마우스 포인터가 요소 위로 올라온 순간
mouseout	마우스 포인터가 요소에서 벗어나는 순간
mouseenter	마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
mouseleave	마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)

mouseover, mouseout VS mouseenter, mouseleave

1. 버블링이 일어나지 않는다.

 

마우스를 올렸을 때의 차이점을 보자.

over에서는 해당 요소 바깥에서 안쪽으로 이동할 때도, 자식 요소 부분으로 이동할 때도 이벤트가 발생하지만, enter에서는 이벤트핸들러가 등록된 바깥 요소에서 안쪽으로 마우스가 이동할 때만 이벤트 핸들러가 동작한다.

2. 자식요소의 영역을 계산하지 않는다. (mouseenter와 mouseleave는 자식 요소의 영역을 계산하지 않는다.)

위 영상에서 mouseover는 자식요소의 영역을 구분하기 때문에 자식요소로 이동했을 때도 마우스 움직임을 카운트 했다. 반면 mouseenter는 자식요소를 구분하지 못하기 때문에 마우스를 자식요소로 움직였다 부모요소로 움직여도 움직임이 카운트 되지 않았다.

---

3. MouseEvent.위치프로퍼티

프로퍼티	설명
clientX, clientY	마우스 포인터의 브라우저 표시 영역(이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역)에서의 위치	client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산한다.
pageX, pageY	마우스 커서의 전체 문서 영역에서의 위치	스크롤로 인해서 보이지 않게된 화면의 영역까지 포함해서 측정한다
offsetX, offsetY	마우스 포인터의 이벤트 발생한 요소(이벤트가 발생한 target이 기준)에서의 위치	offset 값은 이벤트가 발생한 대상을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 대상의 좌측 상단의 모서리 위치를 (0, 0)으로 계산한다.
screenX, screenY	마우스 포인터의 모니터 화면 영역에서의 위치

const box1 = document.querySelector('#box1');

function onMouseMove(e) {
  console.log(`client: (${e.clientX}, ${e.clientY})`);
  console.log(`page: (${e.pageX}, ${e.pageY})`);
  console.log(`offset: (${e.offsetX}, ${e.offsetY})`);
  console.log('------------------------------------');
}

box1.addEventListener('mousemove', onMouseMove);

하늘색 요소 안에서 마우스가 움직이면 console 창에서 위치를 알려준다.

어느 일정한 위치에 도달했을 때 이벤트를 발생시키거나, 마우스가 이동한 방향을 파악하는데 활용하거나 할 수 있다.

---

4. MouseEvent.relatedTarget

mouseenter, mouseleave, mouseover, mouseout 이벤트에는 relatedTarget이라는 프로퍼티가 존재하는데 target 프로퍼티가 이벤트가 발생한 요소를 담고 있다면, relatedTarget 프로퍼티는 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소를 담고 있다.

const box2 = document.querySelector('#box2');

function printEventData(e) {
  console.log('event:', e.type);
  console.log('target:', e.target);
  console.log('relatedTarget:', e.relatedTarget);
  console.log('------------------------------------');
  if (e.target.classList.contains('cell')) {
    e.target.classList.toggle('on');
  }
}

box2.addEventListener('mouseover', printEventData);
box2.addEventListener('mouseout', printEventData);

console창을 보면 relatedTarget은 cell-4 target은 box2이다. event는 mouseover이니, 종합해보면 cell-4에서 box2로 마우스가 이동했다는걸 알 수 있다.

그리고 이 창을 보면, relatedTarget은 body, target은 box2이고, event는 mouseout이다. 종합해보면 box에서 body로 마우스가 이동했다는걸 알 수 있다.

event가 mouseover일때는 마우스가 이동하기 직전의 요소, mousout 일때는 마우스가 이동한 직후의 요소를 담고있는걸 확인할 수 있다.

---

5. KeyboardEvent.type

이벤트 타입	설명
keydown	키보드의 버튼을 누르는 순간
keypress	키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음)
keyup	키보드의 버튼을 눌렀다 떼는 순간

keypress는 웹 표준에서 권장하는 이벤트는 아니기 때문에 keypress 보다 keydown 사용을 추천한다.

---

6. KeyboardEvent.key vs KeyboardEvent.code

키보드 이벤트 객체에는 key와 code 프로퍼티가 자주 사용되는데 key는 사용자가 누른 키가 가지고 있는 값을 나타내고 code는 누른 키의 물리적인 위치를 나타낸다.

---

7. input 태그 다루기

이벤트 타입	설명
focusin	요소에 포커스가 되는 순간
focusout	요소에 포커스가 빠져나가는 순간
focus	요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
blur	요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)
change	입력된 값이 바뀌는 순간 (입력이 시작되기 전 값과 완료된 후 값 사이에 차이가 있을 때 발생, focusout될 때 입력이 완료되었다고 생각해 focusout 직전에 change 이벤트가 발생한다.)
input	값이 입력되는 순간 (esc나 shift 같이 값이 입력되는것이랑 상관 없는 key에는 반응하지 않는다)
select	입력 양식의 하나가 선택되는 순간
submit	폼을 전송하는 순간

---

8. 스크롤 이벤트

scroll 이벤트는 보통 window 객체에 이벤트 핸들러를 등록하고 window 객체의 프로퍼티와 함께 자주 활용된다.

function printEvent(e) {
  console.log(window.scrollY);
};

window.addEventListener('scroll', printEvent);

특히 scrollY 프로퍼티를 활용하면 스크롤된 특정한 위치를 기준으로 이벤트 핸들러가 동작하게 하거나 혹은 스크롤 방향(위로 스크롤 중인지/아래로 스크롤 중인지)을 기준으로 이벤트 핸들러가 동작하게끔 활용할 수도 있다.

---