7장 자바스크립트의 이벤트 처리

7.1 이벤트란?

HTML 문서에는 버튼, 라디오 버튼, 텍스트 박스 등 여러 가지 웹폼이 있어 사용자로부터 정보를 입력 받을 수 있다. 정보의 입력은 대개 마우스로 버튼을 클릭하거나, 키보드를 통해 글자를 입력하는데 이러한 행위가 실시되면 브라우저는 이벤트(event)가 발생하였다고 인식한다. 사용자의 입력 행위뿐만 아니라 HTML 문서의 로딩이나 브라우저의 크기 등 상태 변화도 이벤트가 발생하였다고 한다. HTML5에는 대략 70여개의 표준 이벤트가 있는데 다음은 이벤트가 발생하는 예이다.

– 마우스를 클릭하였을 때

– 마우스를 한 요소 위에 놓았을 때

– 키를 눌렀을 때

– 입력 텍스트 박스에 변화가 있을 때

– 웹페이지가 로드되었을 때

– 이미지가 로드되었을 때

– HTML 폼을 서버에 제출(submit)하였을 때

브라우저가 이벤트 발생을 감지하여 처리하는 자바스크립트 함수나 메소드를 이벤트 리스너(event listener)라 한다. 이벤트는 크게 마우스 이벤트, 키보드 이벤트, 프레임 이벤트, 폼 이벤트로 나눌 수 있다. [표 7.1.1] – [표 7.1.4]는 HTML5의 주요 DOM 이벤트와 이벤트 리스너를 정리한 것이다.

7.2 절에서는 마우스, 키보드, 프레임, 폼 등 이벤트 종류별로 어떠한 리스너를 사용해서 어떻게 이벤트 처리하는지 살펴본다. 7.3절 이후부터는 HTML 주요 태그 객체별로 이벤트 처리 방법을 살펴본다.

7.1.1 이벤트 리스너 작성 방법

자바스크립트에서 이벤트 리스너를 사용하는 방법은 다음 세 가지가 있다.

– HTML 태그 내에 이벤트 리스너 작성

– DOM 객체에 이벤트 리스너 작성

– DOM 객체의 addEventListener() 메소드 이용

가. HTML 태그 내에 이벤트 리스너 작성

HTML 태그 내에 이벤트 리스너 코드를 직접 넣는 방법으로 이벤트 처리가 간단한 경우에 많이 이용된다.

<그림 7.1.1>은 <div> 태그 요소에 마우스를 올리면(onmouseover) 배경색이 노랗게 바뀌고, 마우스가 다른 곳으로 나가면(onmouseout) 다시 흰 배경색으로 바뀌게 하는 예이다.

<그림 7.1.1> HTML 태그내의 onmouseover와 onmouseout 이벤트 리스너 예

나. DOM 객체에 이벤트 리스너 작성

이 방법은 DOM 객체에 이벤트 리스너를 등록하고 처리할 함수명을 지정한다. 이러한 함수를 이벤트 핸들러(handler) 함수 또는 리스너(listener)라 부른다.

객체명.이벤트리스너 = 함수명

예) myDiv.onmouseover = changeColor;  // changeColor는 함수명

<그림 7.1.2>는 <div> 태그의 객체 myDiv에 onmouseover 리스너와 onmouseout 리스너를 작성한 예이다. 이 프로그램의 결과는 <그림 7.1.1>과 동일하다.

<그림 7.1.2> <div> 객체에 onmouseover와 onmouseout 이벤트 리스너 작성 예

<그림 7.1.2>의 예에서 <body onload=”init()”>는 문서가 모두 로드 되었을 때 init() 함수가 작동되도록 한 것이다. 자바스크립트는 컴파일(compile) 언어가 아닌 처리기(interpreter) 언어여서 모든 HTML 문서가 로드되기 전에 <script> 태그 안에 있는 코드가 실행될 수 있다. <body onload= …>와 같이 문서를 로드한 후에 코드를 집행하는 것이 실수를 줄일 수 있다.

위의 예와 같이 리스너 함수의 내용이 간단한 경우에는 this 객체를 이용하여 함수명 없는 형태(익명 함수)로 작성할 수도 있다. 이 방법은 간단하여 자주 이용된다. 다음은 <그림 7.1.2>의 코드를 익명 함수로 작성한 예이다.

myDiv.onmouseover = function () { this.style.backgroundColor = “yellow”;};

myDiv.onmouseout  = function () { this.style.backgroundColor = “white”;};

다. DOM 객체의 addEventListener() 메소드 이용

이 방법은 전통적인 방법으로 DOM 객체에 addEventListener() 메소드를 이용하여 이벤트 리스너를 등록하고 처리할 함수(리스너(listener)라 부름)를 지정하는 것으로 그 형식은 다음과 같다.

.객체명.addEventListener(이벤트명, function, useCapture)

// 이벤트명 :  [표 7.1.1]에서 [표 7.1.4]에 있는 이벤트 이름 사용

// useCapture : true / false, 선택사항임

true이면 이벤트 캡쳐(event capturing) 단계에서 실행

false이면 이벤트 버블(event bubbling) 단계에서 실행

예) myDiv.addEventListener(mouseover, changeColor);  // changeColor는 함수명

다른 방법과 달리 addEventListener() 메소드를 사용하면 사용 후에 removeEventListener() 메소드를 이용하여 리스너를 제거할 수 있다.

addEventListener() 메소드에는 여러 이벤트 핸들러 함수를 중복하여 등록할 수 있다. 이 경우 리스너들은 등록된 순서에 의해 호출된다.

<그림 7.1.3>은 <div> 태그의 객체 myDiv에 addEventListener 메소드를 이용하여 마우스가 <div> 요소에 올라왔을 때 배경색을 노랗게 바꿔본 예이다.

<그림 7.1.3> HTML 태그내의 onmouseover와 onmouseout 이벤트 리스너 예

7.1.2 이벤트 객체

한 이벤트가 발생하면 브라우저는 이 이벤트와 관련된 여러 가지 정보를 담은 객체를 생성하여 이벤트 리스너에 전달한다. 전달되는 정보는 이벤트의 종류에 따라 다른데 예를 들어 mousedown 이벤트는 마우스 좌표, 해당 버튼 정보 등이 있고, keydown 이벤트의 경우 키의 값, [shift] 키가 같이 눌려졌는지 등의 정보가 있다. 이벤트 객체들의 프로퍼티나 메소드는 [표 7.1.5]와 같다.

한 이벤트가 발생하여 처리되고 나면 이벤트 객체는 사라진다.

여러 개의 이벤트가 발생한 경우 브라우저는 순서대로 한 이벤트를 처리한 후 다음 이벤트를 처리한다. 따라서 이벤트 리스너가 실행되는 동안에는 단 한 개의 이벤트 객체만 존재한다.

리스너에 이벤트 객체를 전달하는 방법은 앞 절에서 살펴본 리스너 함수 작성 경우에 따라 약간씩 다르다.

– DOM 객체의 이벤트 리스너 함수에 이벤트 객체 전달하는 경우

– HTML 태그 내에 이벤트 리스너 함수에 이벤트 객체 전달하는 경우

가. DOM 객체의 이벤트 리스너 함수에 이벤트 객체 전달

<그림 7.1.2>에서는 myDiv.onmouseover = changeColor; 와 같이 DOM 객체에 onmouseover라는 이벤트 리스너를 등록하고 이벤트 처리할 함수명 changeColor를 지정하였다. 그리고 changeColor 함수는 다음과 같이 만들었다.

function changeColor() {

myDiv.style.backgroundColor = “yellow”;

}

하지만 이 함수는 function changeColor(e) { … }에서 이벤트 객체를 뜻하는 e를 생략한 것이다. 즉 모든 이벤트 처리 함수는 첫 번째 매개변수로 이벤트 객체를 전달받는다. 하지만 이 첫 번째 매개변수 e는 생략할 수 있다.

익명 함수의 경우에도 다음과 같이 첫 번째 매개변수인 이벤트 객체를 생략한 것이다.

myDiv.onmouseover = function (e) { this.style.backgroundColor = “yellow”;};

나. HTML 태그 내에 이벤트 리스너 함수에 이벤트 객체 전달

HTML 태그에 이벤트 리스너 함수를 지정하는 경우 다음과 같이 event라는 이름으로 이벤트 객체가 전달된다.

<script>

function changeColor(e) {

myDiv.style.backgroundColor = “yellow”;

}

</script>

</head>

<body >

<h3>mouseover 이벤트 리스너</h3>

<div onmouseover=”changeColor(event)” style=”border: 1px solid black”>

나에게 마우스를 올려보세요

</body>

7.1.3 이벤트 객체의 전달 과정

이벤트가 발생하면 이벤트 객체가 만들어져서 이 이벤트를 발생시킨 타겟(target) 객체에 전달된 후 이벤트에 대한 처리가 된 후 사라진다. 하지만 이벤트 객체가 단번에 타겟에 전달되고 사라지는 것은 아니다. 이벤트 객체는 DOM 트리의 제일 위의 window 객체에서 시작해서, document 객체를 거쳐, 트리에 있는 중간 DOM 객체를 지나 타겟 객체에 도달하는데 이를 캡쳐 단계(capturing phase)라 부른다. 타겟 객체에 도달한 이벤트 객체는 처리가 된 후 다시 거꾸로 window 객체까지 전달된 후 사라지는데 이 과정을 버블 단계(bubbling phase)라 부른다. 이벤트 객체의 발생에서 소멸될 때까지의 전 과정을 이벤트 전파(event propagation)라 부른다.

이벤트 객체가 지나가는 캡쳐 단계에 있는 어느 DOM 객체도 리스너를 갖고 이벤트 처리를 할 수 있는데 이를 캡쳐 리스너(capture listener)라 부른다. 그리고 역시 버블 단계에 있는 어느 DOM 객체도 리스너를 갖고 이벤트 처리를 할 수 있는데 이를 버블 리스너(bubble listener)라 부른다.

<그림 7.1.4>는 간단한 HTML 문서의 DOM 트리이다. 브라우저가 HTML 페이지를 로드하였을 때 BOM과 DOM 객체의 최상위에 있는 window 객체가 생성되며, 이 window 객체의 자식이며 모든 DOM 객체의 뿌리(root)인 document라는 객체가 만들어진다. document 객체는 html이라는 하위 객체를, 그리고 html 객체는 그 하위에 head와 body 객체를 만든다. 각 HTML 태그마다 하나의 DOM 객체가 생성되었고 부모-자식의 포함 관계에 따라 태그의 계층적 구조를 볼 수 있다.

<그림 7.1.4> HTML 문서와 DOM 트리

만일 <그림 7.1.4>에서 사용자가 학과를 입력하기 위해 텍스트 입력 박스를 마우스로 클릭하였다고 하자. 그러면 click 이벤트 객체가 발생하고 이 객체는 window ⇒ document ⇒ <html> ⇒ <body> ⇒ <form> 등의 DOM 객체를 지나오는데 이를 캡쳐 단계라 부른다. 이 과정에 있는 DOM 객체에 onclick 캡쳐 리스너가 있으면 순서대로 실행된다. click 이벤트의 타겟 객체는 첫 번째 <input> 이다. 여기서 이벤트 처리를 한 후 객체는 역으로 <form> ⇒ <body> ⇒ <html> ⇒ document ⇒ window 객체에 도달하는데 이를 버블 단계라 부른다. 이 과정에 있는 DOM 객체에 onclick  버블 리스너가 있으면 순서대로 실행된다. window 객체에 도달한 후 이벤트 객체는 사라지게 된다.

캡쳐 리스너와 버블 리스너의 지정은 addEventListener(이벤트명, function, useCapture)의 세 번째 매개변수 useCapture를 이용한다. 만일 useCature가 true이면 캡쳐 리스너가 되고, false이면 버블 리스너가 된다. 대개의 개발자들은 두 개의 리스너를 모두 사용하지는 않고 버블 리스너를 많이 이용한다.

이벤트 객체가 전파되는 중에 stopPropagation() 메소드를 이용하면 전파를 멈출 수 있다.

이벤트객체명.stopPropagation();

7.2 이벤트 종류별 이벤트 처리?

이 절에서는 마우스, 키보드, 프레임, 폼 등 이벤트 종류별로 이벤트 리스너와 처리 방법을 살펴본다.

7.2.1 마우스 이벤트

마우스는 웹 프로그래밍에서 제일 많이 사용되는 도구로 마우스 클릭(click), 더블 클릭(dbclik), 마우스 버튼을 누르고 있거나(mousedown) 뗄 때(mouseup), 마우스 위치를 옮기거나(mousemove) 영역을 벗어나거나(mouseout), 한 요소 위에 위치하거나(mouseover) 들어가거나(mouseenter) 나올 때(mouseleave), 우측 마우스를 클릭할 때(contextmenu) 등 10가지 이벤트가 존재한다.

마우스 이벤트 객체는 [표 7.2.1]과 같은 프로퍼티를 갖는다.

가. click과 dblclick 이벤트

click 이벤트는 마우스로 버튼을 짧게 클릭하였을 때 발생하는 것으로 이벤트 리스너는 onclick이다. dblclik 이벤트는 마우스로 더블클릭하였을 때 발생하는 것으로 이벤트리스너는 ondblclick이다. 이러한 이벤트는 모든 HTML 태그에 적용된다.

<그림 7.2.1>은 버튼을 클릭하였을 때 메시지가 출력되는 예이다. <그림 7.2.2>는 이 예를 변형시켜 버튼을 클릭하면 오늘의 날짜와 시간이 표시되는 문단이 출력되고, 이 문단을 누르면 글자색과 배경색이 바뀌는 예이다.

<그림 7.2.1> 버튼에 click 이벤트 처리 예

<그림 7.2.2> 버튼과 문단에 각각 click 이벤트 처리 예

나. 기타 마우스 관련 이벤트

앞 절의 <그림 7.1.3>은 <div> 태그의 객체 myDiv에 addEventListener 메소드를 이용하여 mouseover와 mouseout 이벤트로 배경색을 바꾸어 본 예이었다.

<그림 7.2.3>은 mousedown과 mouseup 이벤트를 사용하여 배경색과 문단의 내용을 바꾸어 본 예이다. EX070203.htm을 실행하면 노랑 배경색에 ‘나를 마우스 클릭하세요’가 나타난다. 이 문단을 마우스 클릭한 후 떼지않고 누르고 있으면(mousedown) ‘마우스를 누르고 있음’메시지가 나타난다. 마우스에서 손을 떼면(mouseup) ‘마우스에서 손을 떼었음’ 메시지가 나타난다.

<그림 7.2.4>는 mousemove, mouseenter, mouseover 이벤트를 비교한 예로서 마우스를 각 <div> 요소로 움직이면 총 발생한 이벤트 수를 출력한다. mousemove는 마우스 포인터가 회색으로 표시된 <div> 요소에 들어가서 움직일 때마다 발생한다. mouseenter 는 회색 <div> 요소 밖에서 내부로 들어갈 때 발생한다. mouseover는 마우스 포인터가 <div> 요소나 그 자식(예의 경우는 <p>나 <span>) 요소에 들어갈 때 발생한다.

<그림 7.2.4> mousemove, mouseenter, mouseover 이벤트를 비교한 예

7.2.2 키보드 이벤트

키보드 이벤트는 입력 박스에 키를 눌렀을 때(keydown)나 떼었을 때(keyup) 또는 눌렀다고 놓았을 때(keypress) 발생한다.

<그림 7.2.5>는 입력 박스에 키를 입력하여 keydown 이벤트가 발생하면 입력 박스 배경색을 노랑색으로 바꾸어 본 예이다. HTML 태그 내에 onkeydown 리스너를 작성하였다.

<그림 7.2.5> HTML 태그에서 keydown 이벤트 처리 예

EX070206.htm은 위의 예를 자바스크립트 코드를 이용하여 작성해본 것이다.

<그림 7.2.6> HTML 태그에서 keydown 이벤트 처리 예

EX070206.htm은 addEventListener()를 사용하여 다음과 같이 작성할 수도 있다.

document.getElementById(“demo”).addEventListener(“keydown”, myFunction);

<그림 7.2.7>은 입력 박스에 영문 소문자 키를 입력해서 키에서 손을 떼는(keyup) 순간  입력된 문자를 대문자로 바꾸어주는 예이다. HTML 태그 내에 onkeyup 리스너를 작성하였다.

<그림 7.2.7> HTML 태그에서 keyup 이벤트 처리 예

7.2.3 프레임 이벤트

프레임 이벤트 중에서 많이 사용되는 것은 HTML 문서를 모두 로드했는지 체크하는 load 이벤트이다. 자바스크립트는 컴파일 언어가 아니고 인터프리터 언어여서 HTML 문서를 모두 로드 하지 않은 상태에서 실행될 수 있다. 이것을 방지하기 위하여 모드 로드된 이후 실행하기 위해 load 이벤트를 이용한다. resize 이벤트는 프레임이나 윈도의 크기를 변경했을 때 발생하고, scroll 이벤트는 스크롤 하였을 때 발생한다.

<그림 7.2.8>은 onload 이벤트를 이미지가 로드되었는지 체크하는데 사용한 프로그램 예이다.

<그림 7.2.8> HTML 태그에서 onload 이벤트를 이미지가 로드되었는지 체크하는데 사용한 프로그램 예

7.2.4 폼 이벤트

폼 이벤트 중에서 많이 사용되는 것은 입력 웹폼에 포커스가 위치할 때 발생하는 focus와, 포커스를 잃어 버렸을 때 발생하는 blur, 입력 요소에 사용자가 입력하였을 때 발생하는 input, 폼이 서브밋 되었을 때 발생하는 submit, 입력 박스를 초기화 했을 때 발생하는 reset, 입력 양식의 한 필드를 선택했을 때 발생하는 select 등이 있다.

<그림 7.2.9>는 <그림 7.2.5>의 onkeydown 리스너를 onfocus 리스너로 바꾼 프로그램 예이다. 입력 박스를 마우스로 클릭하면 창이 포커스 이벤트를 받아 노랑 배경색으로 바뀐다.

<그림 7.2.9> HTML 태그에서 onfoucs와 onblur 이벤트를 사용한 프로그램 예

<그림 7.2.9>는 HTML 태그에서 onfocus 리스너를 사용하였는데 다음과 같이 자바스크립트 내에서 리스너를 사용할 수도 있다.

document.getElementById(“demo”).onfocus = function() {myFunction()};

document.getElementById(“demo”).addEventListener(“focus”, myFunction);

<그림 7.2.10>은 input 이벤트를 이용하여 슬라이더의 값을 출력하는 프로그램 예이다. 슬라이더를 움직이면 이벤트가 발생하고 브라우저의 슬라이더 값을 출력한다.

<그림 7.2.10> HTML 태그에서 oninput 이벤트를 사용한 프로그램 예

<그림 7.2.11>은 action=“#”로 지정하여 서버에서 처리하지 않고 자바스크립트로 처리하는 프로그램이다. SUBMIT 버튼을 클릭하면 alert 메시지가 나타난다.

<그림 7.2.11> HTML 태그에서 onsubmit 이벤트를 사용한 프로그램 예

<그림 7.2.12>는 select 이벤트를 보여주는 예이다. 입력 박스의 문자열을 마우스로 선택하면 메시지가 나타난다.

<그림 7.2.12> HTML 태그에서 onselect 이벤트를 사용한 프로그램 예

 

Button 객체는 마우스로 버튼을 클릭할 때 발생하는 이벤트를 처리하는 onclik 이벤트 리스너를 이용하여 여러 가지 프로그램 작업을 한다. 버튼이 포커스를 갖거나 잃는 이벤트 발생을 처리하는 onfocus, onblur 리스너를 이용할 수 있다.

버튼을 만드는 <input> 태그의 이벤트 리스너를 포함하는 일반적인 형식은 다음과 같고 button 객체의 주요 프로퍼티는 [표 7.3.1]과 같다.

<input type=”button” name=”이름” value=”문자열”

onclick=”이벤트 핸들러” onfocus=”이벤트 핸들러” onblur=”이벤트 핸들러”>

<그림 7.3.1>은 버튼의 여러 가지 이벤트를 처리하는 프로그램 예이다.

<그림 7.3.1> 버튼의 이벤트 처리 프로그램 예

 

Text와 Textarea 객체는 입력 박스를 만들어 사용자로부터 정보를 받기 때문에 자주 이용된다. Text 입력 박스는 한 줄의 문자열을 입력할 수 있지만 Textarea는 여러 줄의 문자열을 입력할 수 있다.

Text와 Textarea 객체는 입력 박스가 포커스를 받거나 잃을 때 발생하는 이벤트를 처리하는 onfous와 onblur 이벤트 리스너를 이용할 수 있고, 입력 박스 내용의 변화를 감지하는 onchange, 입력 텍스트의 문자열을 선택했는지 감지하는 onselect 이벤트 리스너를 사용할 수 있다.

Text 객체를 만드는 <input> 태그의 이벤트 리스너를 포함하는 일반적인 형식은 다음과 같고 Text 객체의 주요 프로퍼티는 [표 7.4.1]과 같다.

<input type=”text” name=”이름” size=크기 maxlength=최대길이 value=”초기문자열”

onblur=”이벤트 핸들러” onchange=”이벤트 핸들러”

onfocus=”이벤트 핸들러” onselect=”이벤트 핸들러”>

Textarea 객체를 만드는 <textarea> 태그의 이벤트 리스너를 포함하는 일반적인 형식은 다음과 같다. Textarea는 <input> 태그를 사용하지 않고 독립적인 <textarea> 태그를 사용한다.

<textarea name=”이름” rows=행수 cols=열수

onblur=”이벤트 핸들러” onchange=”이벤트 핸들러”

onfocus=”이벤트 핸들러” onselect=”이벤트 핸들러”> 문자열

</textarea>

Text와 Textarea 객체의 주요 프로퍼티는 [표 7.4.1]과 같다.

가. Text 객체의 속성 출력 예

<그림 7.4.1>은 Text 객체의 name/value/defaultValue/type 속성을 출력하는 프로그램 예이다.

<그림 7.4.1> 텍스트 입력 박스의 이벤트 처리 프로그램 예

나. 입력 박스의 포커스 예

입력 박스는 onfocus / onblur 이벤트 리스너를 이용하여 포커스를 갖거나 잃을 수 있다.

포커스를 이동하는 방법은 텍스트 입력 박스를 마우스로 클릭하거나 탭(tab) 키를 눌러 이동하는 방법이 있다.

<그림 7.4.2>는 포커스 이벤트 처리를 한 예이다. 이름 입력 박스를 마우스로 클릭하면 ‘포커스 얻음’메시지가 나타나고, 브라우저의 다른 곳을 클릭하면 ‘포커스 잃음’ 메시지가 나타난다.

<그림 7.4.2> 텍스트 입력 박스의 포커스 이벤트 처리 예

focus() 메소드는 텍스트 입력 박스에 포커스를 줄 때 사용하고, blur() 메소드는 포커스를 해제할 때 사용된다. select() 메소드는 현재 커서가 있는 텍스트 입력 박스의 문자열 전체를 선택할 때 사용된다.

<그림 7.4.3>은 Text 객체에 이러한 메소드를 사용한 예이다. 입력 박스만 포커스를 받으면 박스내의 첫 글자가 포커스를 받는다. 전체 문자열이 포커스를 받으려면 select() 메소드를 이용하여야 한다.

<그림 7.4.3> 텍스트 입력 박스의 이벤트 처리 메소드 사용 예

다. 입력 박스를 이용한 계산기 예

eval() 메소드는 수식 문자열을 실수로 계산하여 준다. <그림 7.4.4>는 이 메소드를 이용하여 텍스트 입력 박스의 수식 문자열을 계산하는 간단한 계산기 프로그램 예이다.

<그림 7.4.4> 텍스트 입력 박스 내용을 eval() 메소드로 계산한 프로그램 예

라. Textarea에서 defaultValue 속성과 select() 메소드 사용 예

defaultValue 속성은 Textarea 입력 박스에서 초기에 입력된 문자열을 알아낼 수 있고 select() 메소드는 텍스트 영역에 입력된 문자열을 모두 선택할 수 있도록 해주는 메소드이다. <그림 7.4.5> 는 이러한 메소드를 사용하는 예이다. 문자열을 새로 입력하였을 때 초기 문자열’버튼을 누르면 처음 입력되어 있던 문자가 나타나고 ‘전체 선택’버튼을 누르면 입력된 모든 문자열이 선택된다.

<그림 7.4.5> Textarea에서 defaultValue 속성과 select() 메소드 사용 예

마. Textarea에서 value 속성을 이용한 문자열 옮기기 예

value 속성은 Textarea 입력 박스에 문장을 설정하거나 반환하기 위해서 사용된다. value 속성을 이용하여 여러 줄의 문자열을 넣을 때는 줄바꾸기 ‘\n’을 삽입하여야 한다. <그림 7.4.6>은 Textarea 입력 박스에서 value 속성을 이용한 예이다. ‘텍스트 내용 이동’ 버튼을 누르면 첫째 입력 박스에 있던 내용이 둘째 입력박스로 이동된다.

<그림 7.4.6> Textarea에서 value 속성을 이용한 문자열 옮기기 예

  

Radio 객체는 여러 개의 항목 중 한 항목만 선택할 수 있고, Checkbox 객체는 여러 항목 중 한 항목 이상을 선택할 수 있다. 체크박스는 한번 선택하면 체크되고 다시 선택하면 체크가 없어진다. 체크 박스는 여러 항목 중 한 항목 이상 선택할 수 있다.

Radio 버튼과 Checkbox를 생성하기위한 <input> 태그의 일반적인 형식은 다음과 같다. 주요 프로퍼티는 [표 7.5.1]과 같다.

<input type=”radio” name=”이름” value=”문자열” checked

onblur=”이벤트 핸들러” onclick=”이벤트 핸들러” onfocus=”이벤트 핸들러” > 문자열

<input type=”checkbox” name=”이름” value=”문자열” checked

onblur=”이벤트 핸들러” onclick=”이벤트 핸들러” onfocus=”이벤트 핸들러” > 문자열

<그림 7.5.1>은 라디오 버튼의 이벤트 처리 프로그램 예이다. 좋아하는 과목을 선택한 후 ‘선택된 과목 확인’ 버튼을 클릭하면 그 결과가 나타난다.

<그림 7.5.1> 라디오 버튼의 이벤트 처리 프로그램 예

<그림 7.5.2>는 체크박스의 이벤트 처리 프로그램 예이다. 수강 과목을 모두 선택한 후 ‘선택된 과목 확인’ 버튼을 클릭하면 그 결과가 나타난다.

<그림 7.5.2> 체크박스의 이벤트 처리 프로그램 예

 

Select 객체는 HTML의 <select> 태그를 이용하여 리스트 박스 또는 콤보박스를 처리할 수 있도록 프로퍼티, 메소드, 이벤트 리스너를 제공한다.

Select 객체의 size 프로퍼티가 설정되지 않았거나 1이면 콤보박스가 만들어지고 size 값이 2 이상이면 리스트 박스가 만들어 진다.

리스트 박스를 생성하기 위한 <select> 태그의 일반적인 형식은 다음과 같다.

<select name=”이름” size=크기 multiple

onblur=”이벤트 핸들러” onchange=”이벤트 핸들러” onfocus=”이벤트 핸들러”

<option> 문자열 </option>

<option> 문자열 </option>

</select>

Select 객체의 콜렉션, 주요 프로퍼티, 메소드는 [표 7.6.1]과 같다.

options 프로퍼티는 항목을 배열 형태의 정보를 가지고 있고 다음과 같은 형태로 사용될 수 있다.

options[인덱스번호].defaultSelected // 처음 선택한 항목인지 체크

options[인덱스번호].index           // 인덱스 번호

options[인덱스번호].selected         // 인덱스 번호에 해당하는 항목이 선택되었는지 체크

options[인덱스번호].text            // 인덱스 번호에 해당하는 항목의 문자열

options[인덱스번호].value          // 인덱스 번호에 해당하는 항목의 값

[인덱스번호]는 항목의 번호로서 첫 째 항목이 0번이다. 다중 선택을 하려면 <select> 태그 안에 multiple 프로퍼티를  넣어야 한다. 여러 항목의 선택은 [Shift] 키와 [Ctrl] 키를 누른 상태에서 항목을 선택한다.

<그림 7.6.1>은 Select 객체로 드롭다운 리스트를 만들고 이벤트 처리를 한 예이다. multiple 프로퍼티를 지정했기 때문에 여러 개의 option을 선택할 수 있는데 [Ctrl] 키를 누르고 마우스로 클릭하면 된다.

<그림 7.6.1>  Select 객체로 드롭다운 리스트를 만들고 이벤트 처리를 한 예

 

FileUpload 객체는 HTML 문서의 파일 업로드 입력 양식을 처리할 수 있도록 속성, 메소드, 이벤트 리스너를 제공한다. 형식은 다음과 같다.

<input type=”file” name=”이름”

onblur=”이벤트 핸들러” onchange=”이벤트 핸들러” onfocus=”이벤트 핸들러” >

파일 업로드 양식은 자신의 컴퓨터에 있는 파일을 선택하여 넣고자 할 때 사용하는 것으로 텍스트박스와 ‘찾아보기’ 버튼으로 구성된다. ‘찾아보기’ 버튼을 누르면 파일 열기 대화상자가 나타난다.

[표 7.7.1]은 FileUpload 객체의 주요 프로퍼티이다.

<그림 7.7.1> FileUpload 객체의 이벤트 처리 예이다.

<그림 7.7.1>  FileUpload 객체로 이벤트 처리를 한 예

 

앞 절의 여러 예제에서 보듯이 HTML 문서에서 사용자로부터 정보를 입력받는 <input> 태그의 여러 입력 양식은 대개 <form> 태그 안에 묶어서 사용한다.

<form> 태그의 일반적인 형식은 다음과 같다.

<form  name=”폼이름” target=”창이름” action=”이동위치” method=get post enctype= 형식

onreset=”이벤트 핸들러” onsubmit=”이벤트 핸들러” >

입력양식

 

</form>

<form> 태그 안에 넣는 입력 양식 <input> 태그의 종류는 3장에서 살펴보았듯이 [표 7.8.1]과 같다.

<form> 과 <input> 태그를 결합한 예는 다음과 같다.

<form>

<input type=”reset” value=”저장”>

<input type=”reset” value=”이동”>

</form>

Form 객체의 콜렉션, 주요 프로퍼티, 메소드는 [표 7.8.2]와 같다.

가. Form 객체의 정보를 출혁하는 예

<그림 7.8.1>은 Form 객체의 이벤트를 처리하는 자바스크립트 프로그램 예이다.

<그림 7.8.1> Form 객체의 이벤트를 처리하는 예

나. 여러 개의 입력 양식이 있는 경우 elements

elements는 <form> 태그 안에 여러 개의 입력 양식이 있을 때 사용된다. 배열을 이용하기 때문에 elements[인덱스번호] 형태로 이용된다. 즉 첫째 입력 양식은 elements[0], 두 번째 입력 양식은 elements[1] 등이다.

document.폼이름.elements[인덱스번호]

이 메소드를 사용하면 입력 양식의 value 메소드를 사용해서 입력된 문자열을 다음과 같이 확인할 수 있다.

if (document.form1.elements[0] != “”)

str = “이름  : ” + document.form1.elements[0].value + “\n”

else str = “이름  : 입력 없음 \n”

<그림 7.8.2>는 <form> 안에 여러 개의 입력 양식이 있는 경우 elements 메소드 사용 예이다.

<그림 7.8.2> <form> 안에 여러 개의 입력 양식이 있는 경우 elements 메소드 사용 예

다. 여러 개의 Form이 있을 경우 forms

한 HTML 문서에 여러 개의 <form> 태그를 처리하기 위해 다음과 같은 배열 형태의 forms[인덱스번호]를 지원한다. 첫 번째 <form> 태그의 인덱스 번호는 0, 두 번째 <form> 태그의 인덱스 번호는 1등이다. 그리고 몇 개의 <form> 태그가 있는 지 알 수 있는 forms.length를 지원한다. 형식은 다음과 같다.

document.forms[인덱스번호]

document.forms.length

<그림 7.8.3>은 여러 개의 Form이 있을 경우 forms 메소드 사용 예이다.

<그림 7.8.3> <form> 안에 여러 개의 입력 양식이 있는 경우 elements 메소드 사용 예

라. 폼 내용의 리셋(reset)과 전송(sumbit)

<input type=”reset”> 은 입력된 텍스트 내용을 재입력 할 수 있게 하여 주고 <input type=”submit” > 는 입력된 텍스트 내용을 폼 핸들러(form-handler)에 보낸다.

onreset 이벤트는 Reset 버튼을 눌렀을 때 발생하고 onsubmit 이벤트는 Submit 버튼을 눌렀을 때 발생한다.

<그림 7.8.4>는 reset, submit를 이용하는 프로그램 예이다. RESET 버튼을 누르면 입력된 정보가 초기화 된다. SUBMIT 버튼을 누르면 입력된 정보를 폼 핸들러에 보낸다.

<그림 7.8.4> 폼 내용의 리셋(reset)과 전송(sumbit) 예

마. 입력양식에서 공통적으로 사용할 수 있는 메소드 toString()과 valueOf()

toString()과 vauleOf() 메소드는 자바스크립트의 모든 양식 객체(Text 등)에서 사용할 수 있는데 그 형식과 설명은 다음과 같다.

<그림 7.8.5>는 toString() 과 valueOf 메소드 사용 예이다.

<그림 7.8.5> toString() 과 valueOf 메소드 사용 예