Check Event
- `checkbox`, `radio` 등의 버튼의 상태가 변경되었을 때 발생하는 `change` 이벤트이다.
- inline에서는 onChange 속성을 사용하여 이벤트를 추가한다.
1. checkbox에 대한 change 이벤트
체크했을 때, 체크 해제했을 때 이벤트가 발생한다.
1) event.target.checked 확인하기
체크 했을 때 발생하는 event 객체 정보
체크 해제 했을 때 발생하는 event 객체 정보
문제
1. 입력한 행, 열에 대한 테이블을 생성
2. 테이블의 중앙에 포인트로 지정할 셀의 배경을 회색으로 표현
3. 키보드 방향키로 포인트를 이동
4. 마우스로 선택시 포인트 이동
위 조건을 만족하는 스크립트를 작성하라
- input 태그를 통해 행과 열의 정보를 입력 받고 버튼을 클릭했을 때, makemap() 함수를 사용하여 테이블을 생성한다.
문제를 수행하기 위해서 작성할 함수는 다음과 같다.
init(tbl, row, col)
- 입력받은 행, 열 데이터를 바탕으로 행, 열 테이블을 만든다
- 행, 열을 추가할 테이블을 매개변수로 받는다
- 각 셀에 onlick 이벤트를 추가하여, 포인터가 이동하는 clickfunc()을 추가한다
startPosition(x, y)
- 입력받은 매개변수를 사용하여 셀을 탐색하고 배경을 회색으로 변경한다
- 처음 테이블이 생성될 때, 초기 포인터 배경색을 변경하는데 사용하는 함수이다
makemap()
- 처음에 테이블 내 자식 요소를 모두 제거한다
- 입력받은 행, 열 데이터를 정수형으로 형변환 한다
- 가공한 행, 열 데이터를 init 함수에 전달하여 테이블을 생성한다
- 초기 포인터 위치를 계산하여 startPosition(x, y) 함수를 사용해서 포인터 요소의 배경색을 변경한다.
- 초기 포인터 위치를 전역으로 선언된 상태 변수에 저장해둔다.
clickfunc(x, y)
- 셀을 클릭할 시, 포인터 위치가 변경되고 배경색을 변경하는 함수이다.
이벤트에서 처리할 프로세스
방향키 입력에 따른 포인터 위치 변환과 배경색 스타일 변경작업