프로그래밍/Javascript

문서 객체 모델 - 이벤트

이벤트는 키보드를 누르거나 마우스를 클릭하는 것처럼 어떠한 현상이 프로그램에 영향을 미치는 것을 의미합니다. 이벤트는 사용자가 직접 발생시킬 수도 있고 응용 프로그램에서 자체적으로 발생시킬 수도 있습니다. 자바스크립트는 다음 이벤트를 기본으로 지원합니다.


- 마우스 이벤트

- 키보드 이벤트

- HTML 프레임 이벤트

- HTML 입력 양식 이벤트

- 사용자 인터페이스 이벤트

- 구조 변화 이벤트

- 터치 이벤트


이벤트 용어를 정리하고 이벤트와 관련된 내용을 살펴보겠습니다. 지금까지 문서 객체를 조작하면서 다음 코드를 계속 사용해 왔습니다.


window.onload = function () { };


코드에서 onload를 이벤트 속성이라고 합니다. on을 제외한 load를 이벤트 이름 또는 이벤트 타입이라고 합니다. 그리고 이벤트 속성에 넣는 함수를 이벤트 리스너 또는 이벤트 핸들러라고 합니다.


5. 1 이벤트 모델


문서 객체에 이벤틀르 연겨하는 방법을 이벤트 모델이라고 합니다. 이벤트 모델은 [표 10-6]처럼 DOM Level 버전에 따라서 구분할 수 있으며 각각 두 가지로 또 나눕니다.


[표 10-6] 이벤트 모델 종류 (이벤트 연결 방식)


DOM Level 

종류 

DOM Level 0 

- 인라인 이벤트 모델 

 

- 고전 이벤트 모델 

DOM Level 2 

- 마이크로소프트 인터넷 익스플로러 이벤트 모델 

 

- 표준 이벤트 모델 


DOM Level 0 버전의 이벤트 연결 방식은 쉬워서 널리 사용합니다. 하지만 이벤트를 중복해서 연결할 수 없다는 단점이 있습니다. 반면 DOM Level 2 버전의 이벤트를 중복해서 연결할 수 있지만, 웹 브라우저 종류에 따라 연결하는 방법이 달라 문제가 됩니다.


이는 모두 jQuery 라이브러리를 사용해극복할 수 있습니다. 이 책에서는 DOM Level 0에 해당하는 인라인 이벤트 모델과 고전 이벤트 모델만 살펴보고 곧바로 jQuery 라이브러리로 넘어갑니다.


인라인 이벤트 모델


인라인 이벤트 모델은 웹 페이지의 가장 기본적인 이벤트 연결방식으로 HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결합니다. 전 세계적인 추세로 보면 인라인 이벤트 모델은 거의 사용하지 않습니다. 하지만 국내에는 아직도 인라인 이벤트 모델을 사용하는 웹 사이트가 굉장히 많으므로 예제로 간단히 살펴보겠습니다.


기본 예제 10-10 인라인 이벤트 모델


다음 코드에서는 button 태그 내부에 oncilck 속성을 사용해 자바스크립트 코드를 입력했습니다. 코드를 실행하고 button 태그르 클릭하면 경고창을 출력합니다.


[코드 10-15] 인라인 이벤트 모델 사용


<!DOCTYPE html>

<html>

<head>

<title>Event Basic</title>


</head>

<body>

<button onclick="alert('click')">버튼</button>

</body>

</html>


HTML 태그의 문자열에 on으로 시작하는 속성은 모두 이렇게 이벤트 속성입니다. 이벤트 속성의 종류는 [표 10-7]과 같습니다. 이름만 봐도 대충 어떤 이벤트인지 알 수 있겠죠?


[표 10-7] 이벤트 속성


onblur 

onfocus 

onfocusin 

onfocusout 

onload 

onresize 

onscroll 

onunload 

onclick 

ondbclick 

onmousedown 

onmouseup 

onmousemove 

onmouseover 

onmouseout 

onmouseenter 

onmouseleave 

onchange 

onselect 

onsubmit 

onkeydown 

onkeypress 

onkeyup 

onerror 

 



[표 10-7]을 보고 일일이 외우려는 독자가 있을 것입니다. 저대 외우려고 하지 마세요. 실무에서 통합 개발 환경을 사용하면 [그림 10-4]처럼 어떠한 이벤트가 있는지 한눈에 볼 수 있습니다.


<button on></button>

onabort

onblur

oncanplay

oncanplaythrough

onchange

onclick

oncontextmenu

oncuechange

ondblclick


<그림 10-4> 이벤트 속성 자동 완성


인라인 코드 내부에서 세미콜론으로 문장을 구분하면 여러 행을 입력할 수 있지만 HTML 페이지가 너무 지저분합니다. 그래서 인라인 이벤트 모델을 사용할 때는 script 태그 내부에 함수를 선언한 후 인라인 이벤트 속성 내부에서 해당 함수를 실행하는 형태를 취합니다.



기본 예제 10-11 script 태그로 인라인 이벤트 모델 사용


간단한 예제로 코드를 어떻게 작성하는지 살펴봅니다. 다음 코드는 인라인 이벤트 모델에서 script 태그 내부에 있는 함수를 호출합니다. 실행 결과는 [코드 10-15]와 같습니다.


[코드 10-16] 인라인 이벤트 사용


<!DOCTYPE html>

<html>

<head>

<title>Inline Event</title>

<script>

function buttonClick() {

alert('click');

}

</script>

</head>

<body>

<button onclick="buttonClick()">버튼</button>

</body>

</html>


고전 이벤트 모델


이번엔은 고전 이벤트 모델을 살펴봅니다. 이름은 고전 이벤트 모델이지만 현대에도 많이 사용됩니다. 인라인 이벤트 모델을 확실하게 이해했다면 고전 이벤트 모델도 쉽게 파악할 수 있을 것입니다.


이전 절에서 다음 코드처럼 문서 객체의 속성을 조작한 적이 있습니다. HTML 표준에 속한 속성은 모두 이렇게 사용할 수 있으므로 이벤트 속성도 같은 방법으로 사용합니다.


<var image = document.getElementById('image');

image.width = 100;

image.height = 100;


기본 예제 10 -12 고전 이벤트 모델


문서 객체의 이벤트 속성에 함수를 지정해 [코드 10-16]을 고전 이벤트 모델로 변경할 수 있습니다. 이때 지정한 함수를 이벤트 핸들러 또는 이벤트 리스너라고 합니다. 실행 결과는 [코드 10-15]와 같습니다. 어려운 내용이 아니므로 쉽게 이해할 수 있을 것입니다.


[코드 10-17] 고전 이벤트 사용


<!DOCTYPE html>

<html>

<head>

<title>Traditional Event</title>

<script>

// 이벤트를 연결합니다.

window.onload = function () {

// 문서 객체를 선택합니다.

var button = document.getElementById('button');


// 이벤트를 연결합니다.

button.onClick = function () {

alert('click');

};

}

</script>
</head>

<body>

<button id="button">버튼</button>

</body>

</html>


NOTE_ 이벤트 발생 객체


이벤트 리스너 내부에서 this 키워드를 사용하면 이벤트를 발생한 자기 자신을 의미합니다. 따라서 [코드 10-18]처럼 이벤트 리스너와 내부에서 this 키워드의 textcontent 속성을 사용하면 자기 자신의 문자를 변경합니다. 코드를 실행하면 버튼을 클릭할 때마다 별이 하나씩 추가되는 것을 확인할 수 있습니다.



[코드 10-18] 이벤트 발생 객체


<!DOCTYPE html>

<html>

<head>

<title>Traditional Event</title>

<script>

// 이벤트를 연결합니다.

document.getElementById('button').onClick = function () {

this.textcontent = this.textcontent + '★';

};

</script>

</head>

</html>


5.2 이벤트 객체


현실 세계에서는 사건(이벤트)이 발생하면 누가, 언제, 어디서, 무엇을, 어떻게, 왜에 해당하는 정보를 알 수 있습니다. 자바스크립트도 발생한 이벤트 정보를 이벤트 객체를 사용해 알아낼 수 있습니다.


[코드 10-19]로 이벤트 객체를 이해해 봅시다. 이벤트 리스너의 첫 번재 매개 변수로 이벤트 객체가 들어옵니다.


[코드 10-19] 표준 이벤트 객체


<!DOCTYPE html>

<html>

<head>

<title>evernt Object</title>

<script>

window.onload = function (event) {

alert(event);

};

</script>

</head>

<body>


</body>

</html>


다만 인터넷 익스플로러 8 이하는 표준 이벤트 모델을 사용하지 않고 인터넷 익스플로러 이벤트 모델이라는 독자적인 이벤트 모델을 사용합니다. 인터넷 익스플로러 이벤트 모델에서는 window 객체의 event 속성으로 이벤트 정보가 들어옵니다.


[코드 10-20] 인턴뎃 익스플로러 이벤트 객체


<!DOCTYPE html>

<html>

<head>

<title></title>

<script>

window.onload = function () {

alert(window.event);

};

</script>

</head>

<body>


</body>

</html>


코드를 실행하면 이벤트 객체의 속성(정보)을 출력합니다.


인터넷 익스플로러 9부터는 두 가지 방법을 모두 사용할 수 있습니다. 모든 웹 브라우저에서 이벤트 객체를 사용하려면 일반적으로 [코드 10-21]처럼 작성합니다.


[코드 10-21] 짧은 조건문을 사용한 이벤트 객체 사용


<script>

window.onload = function (e) {

var event;

if (e) {

// 매개 변수 e가 있을 때 : 현대 웹 브라우저

event = e;

} else {

// 매개 변수 e가 없을 때 : 구 버전의 인터넷 익스플로러

 event = window.event;

}

};

</script>


5.3 기본 이벤트 제거


HTML 태그에는 기본적으로 몇 가지 이벤트가 있습니ㅏㄷ. 예를 들어 a 태그를 클릭하면 href 속성에 입력한 위치로 이동하고, form 태그로 생성한 <제출> 버튼을 클릭하면 자동으로 입력 양식을 제출합니다. 이를 기본 이벤트라고 합니다.


웹 페이지에서는 가끔 이러한 기본 이벤트를 막아야 할 때가 있습니다. 예를 들어 [그림 10-8]처럼 회원가입 페이지에서 <확인> 버튼을 누르면 우선 사용자가 정확하게 이름과 주민등록번호를 입력했는지 확인한 후 이동해야 합니다.


[실명확인 회원가입]


ㅁ 아이핀(I-Pin) v 주민등록번호


이름 : 고구마

주민등록번호 : 111111 - 000000


ㅁ 주민등록번호 처리에 동의합니다.


웹 페이지 메시지 : 주민등록번호를 정확하게 입력해 주세요.


<그림 10-8> 기본 이벤트 제걸르 사용한 유효성 검사


이름과 주민등록번호를 잘못 입력했다면 다음 페이지로 이동하면 안됩니다. 이러한 상황에서는 HTML 태그가 가지는 기본 이벤트를 제거해야 합니다. 고전 이벤트 모델에서 기본 이벤트를 제거하려면 이벤트 리스너의 반환 값을 false로 입력합니다.


기본 예제 10-13 기본 이벤트 제거


다음 코드처럼 a 태그의 click 이벤트 리스너의 반환 값에 false를 입력합니다. 코드를 실행하고 a 태그에 해당하는 '버튼' 링크를 클릭해 보세요. 연결된 웹 페이지로 이동하지 않습니다. 이러한 기본 이벤트 제거는 a 태그와 form 태그에 자주 사용합니다.


[코드 10-22] 기본 이벤트 제거


<!DOCTYPE html>

<html>

<head>

<title>Traditional Event - Default Event</title>

<script>

// 이벤트를 연결합니다.

window.onload = function () {

// 문서 객체를 선택합니다.

var button = document.getelementById('button');


// 이벤트를 연결합니다.

button.onclick = function () {

// 기본 이벤트를 제거합니다.

return false;

};

};

</script>

</head>

<body>

<a id="button" href="http://hanbit.co.kr">버튼</a>

</body>

</html>


이 장의 내용이 모두 끝났습니다. 지금까지 실행 결과를 살펴보면 웹 브라우저에 따라 조금씩 결과가 다릅니다. 그래서 다음 장에서 배우는 jQuery 라이브러리가 등장했습니다. 일부 미세하게 처리해야 하는 부분을 제외하면 jQuery 라이브러리를 사용해 모든 웹 브라우저에서 같은 형태로 우베 페이지를 표시할 수 있습니다.

'프로그래밍 > Javascript' 카테고리의 다른 글

jQuery 문서 객체 선택  (0) 2017.08.14
jQuery 라이브러리 설정  (0) 2017.08.14
문서 객체 모델  (0) 2017.08.09
자바스크립트 - 객체  (0) 2017.08.08
자바스크립트 - 함수  (0) 2017.08.07
TAGS.

Comments