[CodeIt] JavaScript 중급 토픽1(다양한 이벤트 알아보기)

- 마우스 버튼으로 하는 이벤트는 MouseEvent객체의 button 프로퍼티를 이용하면 됩니다. MouseEvent.button에서 0은 마우스 왼쪽 버튼, 1은 마우스 휠, 2는 마우스 오른쪽 버튼입니다.

 

- MouseEvent.type에서 click은 마우스 왼쪽 버튼을 눌렀을 때, contextmenu는 마우스 오른쪽 버튼을 눌렀을 때, dbclick은 동일한 위치에서 빠르게 두번 click할 때이고, mousedown은 마우스 버튼을 누른 순간, mouseup은 마우스 버튼을 눌렀다 뗀 순간입니다. 이때, 주의할 점은 하나의 동작에 여러 이벤트가 발생할 수 있다는 점입니다.

 

- 여러 이벤트의 발생 순서는 운영체제에 따라 다를 수 있으니, 주의해야 합니다.

 

- 마우스 이동과 관련된 이벤트 타입(MouseEvent.type)은 마우스 포인터가 이동할 때 발생하는 mousemove, 마우스 포인터가 요소 밖에서 안으로 이동할 때 발생하는 mouseover, 마우스 포인터가 요소 안에서 밖으로 이동할 때 발생하는 mouseout이 있습니다.

 

- 마우스 이동 이벤트에는 위치와 관련된 이벤트 프로퍼티가 자주 활용됩니다. 화면에 표시되는 창 기준 마우스 포인터의 위치인 e.clientX, e.clientY와 웹 문서 전체 기준 마우스 포인터 위치인 e.pageX, e.pageY와 이벤트가 발생한 요소 기준 마우스 포인터 위치인 e.offsetX, e.offsetY가 있습니다. 항상 좌측 상단 모서리 위치가 (0,0)입니다.

 

- MouseEvent.target은 이벤트가 발생한 요소를 의미하고, MouseEvent.relatedTarget은 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소를 의미합니다.

 

- 마우스 이벤트 타입에는 mouseover, mouseout과 비슷한 mouseenter와 mouseleave라는 타입이 있습니다. 차이점은 mouseenter와 mouseleave는 버블링이 일어나지 않으며, 자식 요소의 영역을 계산하지 않습니다.

 

- 키보드 이벤트 타입(KeyboardEvent.type)은 키보드 버튼을 누른 순간인 keydown, 키보드 버튼을 누른 순간인 keypress, 키보드 버튼을 눌렀다 뗀 순간인 keyup이 있습니다. 웹 표준에서 keypress는 권장하지 않으므로 주로 keydown이 사용됩니다.

 

- 키보드 이벤트에서 자주 사용되는 프로퍼티는 이벤트가 발생한 버튼의 값인 e.key와 이벤트가 발생한 버튼의 키보드에서 물리적 위치인 e.code가 있습니다.

 

- input 타입을 다룰 때 사용할 수 있는 이벤트로 포커스 이벤트인 focusin(요소에 포커스가 되었을 때), focusout(요소에 포커스가 빠져 나갔을 때)이 있으며, 이와 비슷한 버블링이 적용되지 않는 focus와 blur도 있습니다.

 

- 또한, 입력 이벤트인 input(사용자가 입력을 할 때), change(요소의 값이 변했을 때)도 있습니다.

 

- scroll 이벤트는 window객체에 이벤트 핸들러를 등록하는 경우가 많습니다. 이때, window.scrollY를 통해 스크롤을 얼마나 내렸는 지 파악할 수 있습니다.