BOM — 선택적 접근 모델
-
초창기부터 현재까지 사용
-
일부 태그만 접근 가능 — 폼 태그, 이미지, 링크
-
계층 구조 + name 식별자로 접근
-
id, class 인식 불가
window.document.form1.txt1.value = 200; // 계층 구조 접근이벤트 (Event)
개념
-
객체에서 발생하는 사건
-
오라클 트리거와 동일한 개념
이벤트 등록 방식
| 방식 | 설명 |
|---|---|
| 정적 | 등록 태그에 직접 onXXX 속성 사용 |
| 동적 | 등록 런타임 시 태그 객체에 이벤트 프로퍼티 대입 |
// 동적 등록 — 함수 이름만 대입 (호출X)
btn3.onclick = m3;이벤트 처리 흐름
-
이벤트 처리기 등록(정의)
-
지켜보기
-
이벤트 발생 → 등록한 코드 자동 실행
| 마우스 | 이벤트 |
|---|---|
| 이벤트 | 발생 시점 |
| onmouseover / onmouseenter | 마우스 커서 진입 순간 |
| onmouseout / onmouseleave | 마우스 커서 이탈 순간 |
| onmousedown | 마우스 버튼 누를 때 |
| onmouseup | 마우스 버튼 뗄 때 |
| onmousemove | 마우스 이동 중 |
| onmousewheel | 휠 움직일 때 |
| onclick | 클릭 이벤트 — 마우스 이벤트와 별개 ⚠️ |
마우스 버튼 구분 (event.buttons)
- 1 — 왼쪽
- 2 — 오른쪽
- 4 — 휠
마우스 좌표
| 프로퍼티 | 기준 | 비고 |
|---|---|---|
| clientX/Y | 문서 좌측 상단 | ✅ 표준 권장 |
| offsetX/Y | 이벤트 발생 객체 좌측 상단 | |
| screenX/Y | 모니터 좌측 상단 | |
| x, y | 문서 좌측 상단 | ❌ 비표준(MS) |
휠 방향
- event.deltaY > 0 — 아래
- event.deltaY < 0 — 위
키 이벤트
| 이벤트 | 반응 대상 | 특징 |
|---|---|---|
| onkeydown | 물리 키 | 찍힌 글자 구분 불가 |
| onkeyup | 물리 키 | 입력 완료 후 발생 |
| onkeypress | 문자 키만 | 특수키 |
키 이벤트 선택 기준
- 일반적 → keydown
- 방금 입력한 값 바로 사용 → keyup
키 이벤트 관련 프로퍼티
-
event.keyCode — 키 코드(숫자)
-
event.key — 키 문자값
-
event.code — 물리 키 코드
-
event.altKey / event.shiftKey / event.ctrlKey — 조합키 여부 (boolean)
방향키 keyCode
- 37 ← / 38 ↑ / 39 → / 40 ↓
HTML 속성 제어
규칙
| HTML 속성 | JavaScript 프로퍼티 | 비고 |
|---|---|---|
| maxlength | maxLength | 복합어 → 캐멀 표기법 |
| readonly | readOnly | 플래그 → boolean |
| bgcolor | bgColor | 문자열 |
| align | align | 문자열 |
-
대부분 프로퍼티는 getter/setter 모두 지원
-
type 속성 변경 — 되도록 금지
-
name 속성 변경 — 절대 금지 ❌ (PK 역할)
window 객체 — 창 제어
자식 창 열기 / 닫기
// 자식창 열기
child = window.open('URL', '창이름', 'width=500, height=400');
// 자식창 닫기
child.close();
// 자식창 자원 접근 (부모 → 자식)
child.document.form1.txt1.value = '홍길동';부모 창 접근 (자식 → 부모)
// opener = 부모창의 window 객체
opener.document.form1.txt1.value = '아무개';창 이름 지정 기준
- 유일한 자식창 → 이름 지정
- 여러 자식창 필요 → 이름 생략 ('')
