728x90
DOM을 이용한 이벤트 처리 방식이다. 이벤트 모델은 다음과 같이 DOM Level 에 따라 분류한다. 총 네가지 방법으로 이벤트를 연결할 수 있다.
DOM Level0
- 인라인 이벤트 모델
- 기본 이벤트 모델
DOM Level2
- 마이크로소프트 인터넷 익스플로러 이벤트 모델
- 표준 이벤트 모델
고전 이벤트 모델
고전 방식은 자바스크립트에서 DOM 객체의 이벤트 속성으로 이벤트를 연결하는 방법이다.
document.querySelector(선택자).onXXX = 익명함수;
document.querySelector("#id").onclick = func(){ /* 이벤트를 처리할 함수 내용 */ };
# 고전 이벤트 모델 예시
<head>
<script>
// DOM level 0 의 고전방식으로 이벤트 처리
function init() {
// document. querySelector(선택자).onXXX = 익명함수 ;
document.querySelector("#img_change").onclick = function () {
var img = document.querySelector("#img");
// 이미지 속성(property) 변경
img.src = "../images/002.png"
img.width = "200";
img.height = "200";
}
}
</script>
</head>
<body onload="init()">
<img src="../images/001.png" width="100" height="100" id="img">
<button id="img_change">이미지 변경</button>
</body>
인라인 이벤트 모델
인라인 이벤트 모델은 HTML 태그 요소 노드에 이벤트 속성을 추가하여 구현한다.
<태그 onXXX = "이벤트를 처리할 함수" > </태그>
<button onclick = "func()" > </button>
# 인라인 이벤트 모델 예시
<head>
<script>
function get_age() {
var age_input = document.querySelector("#age");
var result = document.querySelector("#result");
result.innerText = age_input.value;
}
</script>
</head>
<body>
나이 : <input type="text" id="age"> <br>
<button onclick="get_age()">나이 출력</button> <br> <!-- 인라인 방식 -->
입력 나이 출력: <div id="result">0</div>
</body>
728x90
'Language > JavaScript' 카테고리의 다른 글
| [Javascript] 사용자 정의 객체 JSON (0) | 2023.07.12 |
|---|---|
| [Javascript] 백틱(`) 과 template literal (0) | 2023.07.12 |
| [Javascript] 이벤트와 이벤트 핸들러 (0) | 2023.07.12 |
| [Javascript] 문서 객체 모델 (DOM) (0) | 2023.07.11 |
| [Javascript] 브라우저와 관련된 객체 (BOM) (0) | 2023.07.11 |
