JS(2)

이벤트(Event): HTML 페이지에서 발생하는 사용자의 행동이나 시스템의 사건을 의미합니다.
- 이벤트의 종류: click, mouseover, load 등이 있습니다.
- 이벤트 소스(Event Source): 이벤트가 발생한 HTML 요소 또는 객체입니다.
- 이벤트 핸들러(Event Handler): 이벤트가 발생했을 때 실행되는 코드로, 주로 콜백 함수 형태입니다.
- 이벤트 리스너(Event Listener): 이벤트 소스에서 특정 이벤트를 감지하고 처리하기 위한 메커니즘입니다.
마우스 이벤트
- click: 요소를 클릭했을 때 발생합니다.
- dblclick: 요소를 더블클릭했을 때 발생합니다.
- mouseover: 마우스 포인터가 요소 위로 올라갔을 때 발생합니다.
- mouseout: 마우스 포인터가 요소를 벗어났을 때 발생합니다.
- mousemove: 마우스 포인터가 요소 위에서 움직일 때 발생합니다.
키보드 이벤트
- keydown: 키보드를 눌렀을 때 발생합니다.
- keyup: 눌렀던 키보드를 떼었을 때 발생합니다.
- keypress는 더 이상 사용되지 않습니다(deprecated).

접근 방식: 모든 이벤트 핸들러는 ‘event’라는 이름의 내장 객체를 포함하며, 가독성을 위해 명시적으로 변수를 선언하여 사용하는 것이 권장됩니다.
주요 프로퍼티:
- 마우스 이벤트 좌표:
  - offsetX, offsetY: 현재 요소를 기준으로 한 마우스의 x, y 좌표
  - clientX, clientY: 브라우저 창을 기준으로 한 마우스의 x, y 좌표 (스크롤 무시)
  - pageX, pageY: 브라우저 페이지를 기준으로 한 마우스의 x, y 좌표 (스크롤 포함)
  - screenX, screenY: 모니터 화면을 기준으로 한 마우스의 x, y 좌표
- 키보드 이벤트 정보:
  - key: 사용자가 누른 키의 값을 반환합니다 (예: ‘a’, ‘Shift’).
  - code: 물리적인 키보드의 위치를 반환합니다 (예: ‘KeyA’, ‘ShiftLeft’).
  - altKey, ctrlKey, shiftKey: 각 키가 눌렸는지 여부를 boolean 값으로 반환합니다.
- 이벤트 소스 확인:
  - event.target: 이벤트가 실제로 발생한 요소를 가리킵니다.
  - event.currentTarget: 이벤트 리스너가 등록된 요소를 가리킵니다.
  - 일반 함수에서는 this가 이벤트 소스에 바인딩되지만, 화살표 함수에서는 바인딩되지 않아 event.target을 사용해야 합니다.

캡처링(Capturing)과 버블링(Bubbling): 동일한 이벤트가 중첩된 요소에 겹칠 때 처리되는 방식입니다.
- 캡처링: 이벤트가 외부 요소에서 내부 요소로 전파됩니다.
- 버블링: 이벤트가 내부 요소에서 외부 요소로 전파됩니다.
- addEventListener의 세 번째 인자(useCapture)로 캡처링 사용 여부를 설정할 수 있습니다.
이벤트 진행 제어:
- event.stopPropagation(): 이벤트의 전파(캡처링 또는 버블링)를 중단시킵니다.
- event.preventDefault(): 요소의 기본 동작을 막습니다 (예: form의 submit 동작 중지).

window 객체: 브라우저 창을 나타내는 객체입니다.
시간 기반 작업:
- setInterval(func, delay): 지정된 시간(delay)마다 함수(func)를 주기적으로 실행합니다.
- setTimeout(func, delay): 지정된 시간(delay)이 지난 후 함수(func)를 한 번 실행합니다.
- clearInterval(intervalID): setInterval로 설정된 반복 작업을 중지합니다.
- clearTimeout(timeoutID): setTimeout으로 설정된 작업을 중지합니다.

results matching ""