BOM(Browser Object Model)
브라우저 객체: 웹 브라우저에서만 사용이 가능한 객체들
브라우저에 표시된 컴포넌트에 마우스를 올리거나 클릭하거나 하는 등의 동작을 하면
브라우저에서는 이벤트(사건)라는 것이 동작되도록 만들어져 있다.
이 때 이벤트 발생 시 어떤 동작을 추가하기 위해 자바스크립트를 활용하게 된다.
이를 이벤트 드리븐 모델이라 한다.
이벤트 드리븐 모델
브라우저에 보여지는 페이지 내에서 발생한 여러 이벤트에 대해
대응하는 처리(이벤트 핸들러)를 위해 호출할 함수를 작성해 두어 실행되도록 하는 형태의 모델
이벤트 핸들러
이벤트 발생 시 동작할 내용을 정의함 함수
자바스크립트로 사용이 가능한 브라우저의 주요 이벤트(괄호는 이벤트의 주 대상이 되는 요소)
읽기
abort : 이미지 로딩 중단 시 (img)
load : 페이지, 이미지의 로딩 완료 시 (body, img)
unload : 다른 페이지로 이동 시 (body)
마우스
click : 클릭 시
dbclick : 더블클릭 시
mousedown : 마우스로 누를 때
mousemove : 마우스 포인터가 이동할 때
mouseout : 마우스가 컴포넌트 밖으로 나갔을 때
mouseover : 컴포넌트에 마우스가 올라갔을 때
mouseup : 마우스를 놓을 때
contextmenu : context menu가 표시되기 전(body)
키
keydown : 키를 누를 때
keypress : 키를 누른 상태일 때
keyup : 키를 놓을 때
폼
change : 내용이 변경되었을 때 (input, select)
reset : 리셋될 때 (form)
submit : 서브밋 될 때 (form)
포커스
blur : 포커스를 잃을 때
focus : 포커스를 얻을 때
기타
resize : 사이즈를 변경 했을 때
scroll : 스크롤 했을 때 (body)
이벤트와 이벤트 핸들러를 연결하기(이벤트 처리의 핵심)
- 어떤 요소에서
- 어떤 이벤트가 발생 할 때
- 어떤 이벤트 핸들러 함수를 연결할 것인가
- 처리방법
- <태그명 on이벤트명="핸들러함수호출">
handlertest.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<title>이벤트 드리븐 모델</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function btn_onclick(){
window.alert('버튼이 클릭되었다');
}
</script>
</head>
<body>
<input type="button" value="다이얼로그 표시" onclick="btn_onclick()" />
</body>
</html>
|
cs |
위와 같은 단순한 처리라면 별도의 함수를 정의하지 않고 바로 정의 가능
단순한 처리가 아닌 복잡한 코드를 기술하는 것은 피해야 한다.
handler2test.html
|
1
2
3
4
5
6
7
8
9
|
<html>
<head>
<title>이벤트 드리븐 모델</title>
</head>
<body>
<input type="button" value="다이얼로그 표시" onclick="window.alert('버튼이 클릭되었다.');" />
</body>
</html>
|
cs |
만약 태그 내에 선언된 스크립트가 동작하지 않는 경우 meta태그가 필요
브라우저에게 태그 내에서 사용된 스크립트를 처리할 언어를 알려주는 역할을 한다.
자바스크립트의 코드 내에서 선언하는 방법 - 프로퍼티로써 설정 -
HTML태그는 문서의 레이아웃을 정의하는 용도이므로 자바스크립트 코드를 섞어서 사용하는 것은 좋은 방법이 아니다. 따라서 이벤트와 이벤트 핸들러의 선언을 나누어서 자바스크립트 내에서 작성할 수 있다.
handler3test.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>이벤트 드리븐 모델</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('btn').onclick = function(){
window.alert('버튼이 클릭되었다.');
};
};
</script>
</head>
<body>
<input id="btn" type="button" value="다이얼로그 표시" />
</body>
</html>
|
cs |
이벤트를 등록하는 방법은 다음과 같다.
태그 : 문서 전체에 적용
- window.이벤트명>=function(){ ...처리코드… }
- window.이벤트명>=함수명
특정 태그 요소 : 해당 요소에 적용
- document.getElementById('ID값').이벤트명>=function(){ ...처리코드… }
- document.getElementById('ID값').이벤트명>=함수명
일반적으로 이벤트핸들러는 여러 곳에서 같이 사용될 일이 거의 없음.
따라서 익명 함수를 정의하는 것이 더 간단할 수 있다.
주의
- 이벤트 이름은 모두 소문자로 작성할 것
- 이벤트 핸들러로 등록하는 것은 함수 호출이 아닌 함수 객체이다.
- 개별 요소의 이벤트 핸들러는 onload핸들러 아래에 정의하자.(onload가 끝나야 id를 불러올 수 있다.)
이벤트 표준 동작 취소하기(동작 시키지 않기)
Anchor태그 같은 경우 클릭 시 링크를 요청하게 된다.
form내에서 submit같은 경우 폼 내용을 지정된 action으로 전송하며 요청한다.
이러한 기본 동작을 하지 않도록 만들어야 할 경우가 있다.
canceltest.html
|
1
2
3
4
5
6
7
8
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>이벤트드리븐모델</title>
</head>
<body oncontextmenu="return false;">
</body>
</html>
|
cs |
마우스 우클릭 이벤트가 동작되지 않는다.
이벤트핸들러가 false를 반환하면 이벤트 동작이 취소됨.
이는 자바스크립트 기능을 해제하는 경우 context menu를 사용할 수 있으며 인터넷 임시파일도 직접 참조가 가능함.
BOM 구조
모든 브라우저 객체는 최상위에 위치하는 Window객체를 통해 접근한다.
Window객체의 하위에 존재하는 document, history, location 객체를 이용하여 각 객체를 참조할 수 있다.
실제 사용 시 자바스크립트에서는 window객체를 명시할 필요가 없다.
기본적으로 브라우저 객체에 접근하는 방법
document.write('hello!');
Window객체를 이용하는 방법으로는 다음과 같다.
대문자 Window.document.write('hello!'); 이 방법은 에러이다.
Window객체에 접근하려면 window프로퍼티로 접근한다.
소문자 window.document.write('hello'); 이 방법으로 접근이 가능.(의미는 없다.)
다음과 같은 개념은 알고 있도록 한다.
Window객체 - window : Window객체를 참조하는 프로퍼티
Document객체 - document : Document객체를 참조하는 프로퍼티
Location 객체 - location : Location객체를 참조하는 프로퍼티
History객체 - history : History객체를 참조하는 프로퍼티
'교육자료 > Javascript' 카테고리의 다른 글
| 17-3. Form 브라우저 객체 (0) | 2019.05.13 |
|---|---|
| 17-2. Window 브라우저 객체 (0) | 2019.05.13 |
| 16-2. 자바스크립트에서 객체의 상속 (0) | 2019.05.13 |
| 16-1. 자바스크립트의 객체 지향 특성 (0) | 2019.05.13 |
| 15-5. 자바스크립트 함수의 활용 (0) | 2019.05.09 |