이벤트 처리 심화
event
event와 event listener
- event : html 페이지에서 발생하는 사용자의 행동이나 시스템에 발생한 사건
- click, mouseover, load, store, ...
- event source : event가 발생한 element 또는 객체
- event handler : event가 발생했을 때 실행될 코드 (callback function)
- event listener : event source에서 event를 감지하고 처리하기 위한 매커니즘
- event type과 event handler로 구성
마우스 이벤트
마우스 이벤트
- 마우스 사용과 관련된 이벤트
| 종류 | 설명 |
|---|---|
| click | 마우스로 지정한 요소를 클릭했을 때 발생 |
| dblclick | 더블클릭 했을 때 발생 |
| mouseover | 마우스가 지정한 요소 위로 올라갔을 때 |
| mouseout | 마우스가 지정한 요소를 벗어났을 때 발생 |
| mousemove | 마우스가 지정한 요소 영역에서 움직일 때 발생 |
이벤트 객체
이벤트 객체의 활용
- 각 이벤트 별로 이벤트에 대한 상세 정보 포함
| 구분 | 종류 | 설명 |
|---|---|---|
| 마우스 이벤트 | offsetX, offsetY | 현재 요소를 기준으로 마우스 이벤트가 발생한 x, y 좌표 |
| 마우스 이벤트 | clientX, clientY | 브라우저 기준 마우스 이벤트 발생 x, y 좌표(스크롤바 이동 너비 무시) |
| 마우스 이벤트 | pageX, pageY | 브라우저 기준 마우스 이벤트 발생 x, y 좌표(스크롤바 이동 너비 포함) |
| 마우스 이벤트 | screenX, screenY | 화면 모니터 기준으로 이벤트가 발생한 x, y 좌표 |
| 키보드 이벤트 | key | 사용자가 누른 키 값 (예: a, A, Shift) |
| 키보드 이벤트 | code | 물리적인 키의 위치 (예: KeyA, keyA, ShiftLeft) |
| 키보드 이벤트 | altKey, ctrlKey, shiftKey | 각각 alt, ctrl, shift 키가 눌렸으면 true |
| 전체 | currentTarget, target | 이벤트 리스너가 등록된 요소, 실제 이벤트가 발생한 요소 |
- 접근 방식 : 모든 event handler에서 'event'라는 이름으로 내장 객체 포함
- but 가독성을 위해 명시적 변수 선언 권장
- inline 방식은 명시적 변수 선언 위해 함수 호출 시 'event' 전달 필요
event source 확인
- event source는 이벤트가 발생한 요소로 동작의 출발점이기 때문에 매우 중요
- this, event.target, event.currentTarget
- 일반 함수의 사용 시는 event source가 this에 binding
- 하지만 arrow 함수에서는 event source가 binding 되지 않음 - event 객체 활용
- event.target : 이벤트가 실제로 발생한 요소
- event.currentTarget : 이벤트 리스너가 등록된 요소
event.target vs event.currentTarget
- event.target : 이벤트가 실제로 발생한 요소
- event.currentTarget : 이벤트 리스너가 등록된 요소
동일한 이벤트가 겹칠 때의 처리 방식
- capturing vs bubbling
- 이벤트는 적용 대상 자식 요소들에게도 동일하게 발생되며 handler가 있다면 처리됨
- handler가 있는 요소 : currentTarget
- 이벤트가 발생한 요소 : target
- 이벤트 처리 시점에 따라 capturing과 bubbling으로 구분
- capturing : 이벤트가 외부 요소부터 내부 요소로 파고 들면서 발생하는 성격
- bubbling : 이벤트가 내부 요소부터 외부 요소로 거품처럼 올라오며 발생하는 성격
이벤트 진행 제어
- event.stopPropagation()
- 이벤트의 전파를 막음
- event.preventDefault()
- 요소가 갖는 기본 동작을 막음
- <form> submit 이벤트의 기본 동작
- form의 input 내용들을 서버에 제출
- validation 처리를 위해 일단 기본 동작을 중지시키고 validation 통과 후 submit 처리
키보드 이벤트
키보드 이벤트
- 키보드 조작 시 발생하는 이벤트
- keypress는 deprecated됨
| 종류 | 설명 |
|---|---|
| keydown | 지정한 요소에서 키보드가 눌렸을 때 발생 - 키 입력 감지, 키보드 단축키 구현 등에 사용 |
| keyup | 지정한 요소에서 눌린 키보드를 떼었을 때 발생 - 키 입력 완료 감지, 입력 필드에서의 최종 입력 처리 등에 사용 |
- 키보드 이벤트 객체의 주요 property
| 구분 | 종류 | 설명 |
|---|---|---|
| 키보드 이벤트 | key | 사용자가 누른 키 값 a,A,Shift |
| 키보드 이벤트 | code | 물리적인 키의 위치 KeyA,keyA,ShiftLeft |
| 키보드 이벤트 | repeat | 키가 반복 눌림 상태인지 여부를 나타내는 boolean 값 |
| 키보드 이벤트 | altKey,ctrlKey,shiftKey | 각각 alt,ctrl,shift 키가 눌렸으면 true |
Form 관련 이벤트 처리
form 및 input 이벤트
form 및 input 이벤트
| 종류 | 설명 |
|---|---|
| input | 키 입력,붙여넣기 등 사용자가 입력 필드 내용을 수정할 때 발생 값을 수정할 때 실시간으로 이벤트 발생 |
| change | 입력 필드 내용이 변경되고 엔터를 입력했거나 포커스를 잃었을 때 발생 |
| focus | 해당 요소에 포커스가 설정될 때 발생 |
| blur | 값 변경과 무관하게 포커스를 잃었을 때 발생 |
| select | 사용자가 텍스트를 선택할 때 발생 |
| invalid | 폼 입력 값이 invalid 할 때 발생 |
| submit | 폼 요소를 서버로 전송할 때 |
| reset | 폼 요소의 취소 버튼을 클릭할 때 |
submit과 validation
- validation : 사용자가 입력한 데이터나 정보를 검증하여 해당 데이터가 특정 기준에 충족하는지 확인하는 과정
- html5에서는 입력 요소에 대해 다양한 validation 방법 제공
- type 기반의 validation 체크
- tel, url, email, date, month, week, time
- 속성을 활용한 validation 체크
- type 기반의 validation 체크
| 속성이름 | 설명 | 사용 가능한 값 예시 | 적용 가능한 타입 |
|---|---|---|---|
| required | 입력 필드의 필수 여부를 지정함 | (값 없음) | * |
| minlength | 입력 가능한 최소 문자 수를 지정함 | 정수 | text,password,email,textarea |
| maxlength | 입력 가능한 최대 문자 수를 지정함 | 정수 | text,password,email,textarea |
| min | 입력 가능한 최소 값을 지정함 | 정수 또는 소수 | number,date,time,range |
| max | 입력 가능한 최대 값을 지정함 | 정수 또는 소수 | number,date,time,range |
| step | 숫자 입력 필드의 증가 단위를 지정함 | 정수 또는 소수 | number,range |
| pattern | 입력 값의 정규 표현식 패턴을 지정함 | 문자열 | text,search,email,url |
- 브라우저 종속 validation의 문제
- 브라우저 종속적인 디자인
- 애플리케이션을 사용하는 느낌을 주지 못함
- 비밀번호 불일치 처리 등 추가적인 validation 필요
- HTML이 지원하지 않는 validation 처리는 직접 script를 통해 로직 작성 필요
invalid 이벤트 활용
- invalid 이벤트에서 문제가 없으면 자동으로 submit이 진행됨
- invalid event는 버블링을 발생시키지 않음 - capturing에서 처리
- 내부 요소들에 대해 반복적인 이벤트 발생
ValidityState
- 제약 유효성 검사에 대해 요소가 가질 수 있는 유효성 상태
| 프로퍼티 | 설명 (상태가 true가 되는 경우) | 관련 HTML 속성 | CSS 의사 클래스 |
|---|---|---|---|
| valueMissing | required 속성이 있는데 값이 비어 있는 경우 | required | :invalid |
| typeMismatch | 입력된 형식이 email이나 url 등 지정된 타입과 맞지 않는 경우 | type="email",... | :invalid |
| patternMismatch | 입력값이 설정된 정규 표현식과 일치하지 않는 경우 | pattern | :invalid |
| tooLong | 입력된 문자열 길이가 maxlength보다 긴 경우 | maxlength | :invalid |
| tooShort | 입력된 문자열 길이가 minlength보다 짧은 경우 | minlength | :invalid |
| rangeOverflow | 숫자가 설정된 max 값보다 큰 경우 | max | :invalid,:out-of-range |
| rangeUnderflow | 숫자가 설정된 min 값보다 작은 경우 | min | :invalid,:out-of-range |
| stepMismatch | 입력값이 step으로 나누어 떨어지지 않는 경우 | step | :invalid |
| badInput | 입력을 해석할 수 없는 경우 (예: 숫자 필드에 문자 입력) | type="number" 등 | :invalid |
| customError | setCustomValidity()로 사용자 정의 에러가 설정된 경우 | setCustomValidity() | :invalid |
| valid | 위의 모든 제약 조건을 만족하는 경우 | - | :valid |
화면에 invalid 내용 반영
- target의 validity.valid 상태에 따라서 화면 반영
- target의 validationMessage가 ""면 validity.valid = true
- 입력 시점에 valid 처리
- <form>에서 input 이벤트가 발생할 때마다 validate 상태 업데이트
custom validation rule 추가
- setCustomValidity(msg) : input 요소에 valid 메시지 추가 -> customError 설정
- input 이벤트에서 상호 감시하도록 처리
BOM
BOM
BOM (Browser Object Model)
- 브라우저의 요소를 객체화
- window - 브라우저 객체의 최상위 객체
window 객체
- 브라우저 기반 자바스크립트에서 최상위 객체
- 모든 객체들은 사실 window의 property들 : 일반적으로 window는 생락하고 사용
| 종류 | 설명 |
|---|---|
| let child=window.open(url,name,[spec]); | url을 name과 spec을 이용해 열고 그 창의 객체를 child 변수에 할당 spec은 top=0,left=0,width=400,height=400 등 설정 top,left는 브라우저 지원 여부가 다름 자식 창에서 부모 창을 참조할 때 window.opener 속성 사용 |
| window_reference.close(); | 특정 창을 닫을 때 |
| window.alert(message); | message를 출력하는 경고창을 띄울 때 |
| window.prompt(text,value); | text의 질문에 대한 응답 창을 띄울 때(value는 기본값) |
| window.confirm(message); | message에 대한 확인/취소 창을 띄울 때 |
- 주기적인 작업과 예약 작업
| 종류 | 설명 |
|---|---|
| let intervalID=setInterval(func,delay[,param1,param2,...]); | 주기적인 delay를 두고 func를 실행함. 이때 func에는 param1,param2와 같은 파라미터 전달 가능 |
| window.clearInterval(intervalID) | setInterval로 설정된 반복 작업을 중지함 |
| let timeoutID=setTimeout(func,[delay,param1,param2,...]); | delay(기본은 0) 이후 func를 실행함. 이때 func에는 param1,param2와 같은 파라미터 전달 가능 |
| window.clearTimeout(timeoutID) | setTimeout으로 설정된 작업을 중지함 |
Screen
| 속성 | 내용 | 속성 | 내용 |
|---|---|---|---|
| screen.width | 화면의 가로 | screen.height | 화면의 세로 |
| screen.availWidth | 작업 표시줄을 제외한 화면의 가로 | screen.availHeight | 작업표시줄을 제외한 화면의 세로 |
| screen.colorDepth | 모니터의 표현 가능한 컬러 bit | - | - |
location 객체
- 사용자 브라우저 주소창의 url에 대한 정보와 페이지 이동 기능을 제공하는 객체
| 속성 | 내용 | 속성 | 내용 |
|---|---|---|---|
| location.href | 대상 url로 이동 또는 url 반환 | location.replace(url) | url로 현재 페이지를 대체 |
| location.hostname | URL의 hostname 설정 또는 반환 | location.host | URL의 호스트 이름과 포트 반환 |
| location.port | URL의 포트 번호 반환 | location.protocol | URL의 프로토콜 반환 |
| location.search | URL의 쿼리 스트링 반환 | location.reload() | 새로 고침 |
-
URL의 구성
-
location.href vs location.replace
| 구분 | location.href | location.replace() |
|---|---|---|
| 기능 | 새로운 페이지로의 이동 | 새로운 페이지로 대체(덮어씀) |
| 형태 | 속성 | 기능 |
| 히스토리 기록 여부 | 기록됨 | 기록되지 않음 |
- href는 일반적인 페이지 이동 시 이용
- replace는 이전 페이지의 접근 금지가 필요한 경우 (단계별 회원 가입 등)
history 객체
- 사용자가 방문한 곳에 대한 목록을 제공하여 뒤로 가기 기능 활용 가능
| 속성 | 내용 | 속성 | 내용 |
|---|---|---|---|
| history.back() | 이전 페이지로 이동 | history.forward() | 다음 방문한 페이지로 이동 |
| history.go(숫자) | -2→2단계 전의 페이지 | history.length | 방문 기록에 저장된 목록의 개수 |
navigator 객체
- 브라우저와 운영체제의 정보 제공
| 속성 | 내용 | 속성 | 내용 |
|---|---|---|---|
| navigator.appCodeName | 브라우저 코드명 | navigator.appName | 브라우저 이름 |
| navigator.appVersion | 브라우저 버전 | navigator.language | 브라우저 언어 |
| navigator.product | 브라우저 엔진 이름 | navigator.platform | 브라우저가 실행되는 운영체제 플랫폼 |
geolocation api 활용
- navigator.geolocation : BOM 객체 중 하나인 navigator 객체로부터 geolocation 객체 획득
- geolocation 제공 함수
| 함수 | 설명 |
|---|---|
| getCurrentPosition(successCallback,errorCallback,options) | 요청 시 1회 위치 정보 요청 |
| watchPosition(successCallback,errorCallback,options) | 위치가 변경되면 계속해서 새로운 위치 정보 확인하며 작업 ID 반환 |
| clearWatch(id) | 작업 ID에 대한 모니터링 작업 중단 |
- 위치 정보의 property (sucessCallback의 파라미터로 전달되는 position 객체의 property)
| property | 설명 | property | 설명 |
|---|---|---|---|
| coords.latitude | 위도 | coords.longitude | 경도 |
| coords.accuracy | 실제와의 가능 오차(m) | timestamp | 위치 정보를 얻은 시각 |
Study Logging...