제8장이벤트와 이벤트와이벤트핸들러다루기 학습목표 이벤트와이벤트핸들러를이해하고사용할수있다. event 객체로마우스나키보드의동작을 동작을제어하고관리할 관리할수있다.
목차 8.1 이벤트와이벤트핸들러 8.2 event 객체 2
자바스크립트는넷스케이프사에서넷스케이프웹브라우저를위해자체적으로개발한스크립트언어 자바스크립트는 HTML 페이지를향상시키고자바애플릿을쉽게제어하도록설계 자바스크립트를사용한다면쉽게대화식웹페이지를작성 자바스크립트는프로그래밍기법을기초로하기때문에지금까지 HTML 태그에대한내용보다는약간어려울수있음. 3
1) 이벤트 이벤트가발생하는것은사용자가어떠한행위를했다는것을의미한다. 만약사용자가버튼을클릭했다면 Click 이벤트가일어날것이다. 이벤트핸들러의도움으로우리의자바스크립트프로그램이사용자의이벤트에반응하게됨 마우스를사용하여움직이거나버튼을클릭하거나창을조절하거나하는이벤트들에반응하여많은작업을수행할수있다. 다음과같이클릭이벤트에반응하는간단한예제인 js03.html 을작성한다. <form> <input type="button" value=" 클릭해줘요!" onclick= "alert(' 클릭했군요!!');"> </ form> 4
프로그램을수행시키면버튼이나타나고버튼을클릭하면클릭이벤트가발생하여알림창이나타난다. alert() 는메시지상자를뜨게하는내장함수로괄호안에원하는문자열을쓰면된다. onclick 은버튼이나링크를클릭하는이벤트를말한다. 따라서버튼을클릭하면이벤트가발생하여컴퓨터는 alert() 를실행하게된다. 5
예제에서 onclick="alert( 클릭했군요 )" 와같이이중따옴표와따옴표를모두쓴것을볼수있다. 만약 onclick="alert(" 클릭했군요 ")" 이라고썼다면어느부분이 onclick 이벤트핸들러인지명확하지않아문제가발생할것이다. 그러므로이런경우라면따옴표를구분해서입력해주어야한다. 먼저이중따옴표를쓰고따옴표를쓰던지또는반대로쓰던지순서는상관이없다. 따라서 onclick='alert(" 클릭했군요 ")' 와같이입력해도아무런차이가없다. 6
2) 이벤트의종류 자바스크립트가제공하는이벤트의종류는다음과같다. onabort onblur onchange onclick ondblclick ondragdrop onerror onfocus onkeydown onkeypress onkeyup onload onunload 이벤트 onbeforeunload onreadystatechange onstop onhelf 설명이미지를읽다가중단시켰을때입력양식필드에서포커스가다른곳으로이동했을때입력양식필드에있는값을바꾸었을때입력양식이나링크를마우스로클릭했을때마우스를더블클릭했을때마우스를클릭한상태에서움직였을때문서나이미지를읽다가에러가발생했을때입력양식필드로포커스가들어왔을때키를입력했을때키를눌렀을때키를눌렀다놓았을때문서가읽혀졌을때문서가언로드될때문서가언로드되기전에문서의로딩과정에따라문서상태가변할때마다발생사용자가스톱버튼을클릭하거나웹페이지를이동할대사용자가 F1 키를클릭할때 7
oncontextmenu onchange onmousedown onmousemove onmouseout onmouseover onmouseup onmouseenter onmouseleave onmove onreset onresize onresizestart 사용자가클라이언트영역에서오른쪽마우스버튼클릭 select, text, textarea 의값변경후포커스를잃을때 마우스버튼을눌렀을때마우스를움직였을때마우스가링크나특정영역안에있다가나갔을때링크위로마우스가지나갔을때마우스버튼을눌렀다놓았을때마우스커서가객체위로올라갈때객체위로올라간마우스가내려올때윈도우나프레임을움직였을때입력양식에서리셋시켰을때윈도우나프레임의크기를바꾸었을때윈도우나프레임혹은객체의크기가변경될때, 변경전에발생 8
onresizeend onselect onselectstart onselectionchange onscroll ondrag ondragenter ondragstart ondragover ondragleave ondragend ondrop onbeforecopy oncopy onbeforecut oncut 윈도우나프레임혹은객체의크기가변경된후입력양식의한필드를선택했을때객체가선택되어지고있을때처음객체에발생문서의선택된상태가변경될때 document 객체에발생스크롤바가존재하는객체에스크롤이발생할때드래그동작동안소스객체에계속적으로발생소스가목적객체위로드래그되는순간, 목적객체에발생선택한소스로드래그를시작할때소스객체에발생목적객체위로드래그되어있는동안목적객체에계속발생드래그상태로목적객체에서마우스가빠져나올때, 목적객체에발생드래그동작이끝날시점클릭된마우스가놓여질때, 목적객체에발생드래그동작이끝날시점클릭된마우스가놓여질때, 목적객체에발생선택된소스객체가클립보드로복사되기전에, 소스객체에발생선택된소스객체가클립보드로복사될때, 소스객체에발생선택된소스객체가문서에서제거되기전에, 소스객체에발생선택된소스객체가문서에서제거될때, 소스객체에발생 9
onbeforepaste onpaste onstart onbounce onfinish onactivate onbeforedeactivate ondeactivate onbeforeprint onafterprint onlayoutcomplete onfilterchange 클립보드로부터객체를문서에붙이기전, 목적객체에발생클립보드로부터객체를문서에붙일때, 목적객체에발생 MARQUEE 객체가매번루프를도는시작점에발생 MARQUEE 객체의 behavior가 alternate로된경우텍스트가한쪽끝에도달할때 MARQUEE 객체의루프가완전히종료될때객체가 activeelement로설정될때발생 activeelement가변경되기전, 현재 activeelement 객체에발생 activeelement 가변경될때 문서의프린트나미리보기를수행하기전발생문서의프린트나미리보기를수행한후발생프린트나미리보기시레이아웃이끝날때비쥬얼필터의상태가변할때 10
onlosecapture onpropertychange onbeforeupdate onafterupdate onerrorupdate oncellchange ondataavailable ondatasetchanged ondatasetcomplete onrowenter onrowexit onrowsdelete onrowsinserte onsubmit unload 객체가마우스캡쳐를잃을때프로퍼티가변할때데이터를주로포함하는객체의데이커가변경될때데이터를주로포함하는객체의데이터가변경된후데이터를주로포함하는객체에데이터를변경하면서오류발생할때데이터공급객체인, applet, bdo, object의데이터가변경될때비동기적으로데이터를공급받는객체에데이터가도착할때데이터공급객체들이노출한데이터셋이새로변경될때데이터공급객체들로부터모든데이터가준비되었을때데이터공급객체에현재행이변경되고새데이터가사용가능할때데이터공급컨트롤이현재행을변경하기직전행들이레코드셋으로부터삭제될때새로운행들이레코드셋에추가될때입력양식을서버로보낼때문서가없어질때 11
이벤트를삽입하는방법에는 3 가지방법이있다. 아래예제는 html 태그내에이벤트핸들러코드를작성하는방법으로가장일반적인방법이다. event_1.html 이라는이름으로저장하자. <html> <head><title>event 작성예제 </ title> </ head> <body> <h3>html 태그내에이벤트핸들러코드작성 </h3> <hr> <h2 id=c_1 onclick="this.style.backgroundcolor='blue'"> 텍스트를클릭해보세요 </h2> </ body> </ html> 12
event_1 을실행하여텍스트를클릭하면텍스트의배경이파란색으로바뀌는것을확인할수있다. 13
두번째방법은객체의이벤트핸들러의속성에직접자바스크립트함수를호출하는방법이다. 아래예제를 event_2.html 이라는이름으로저장한다. <html> <head><title>event 작성예제 </ title> </ head> <body> <h3> 객체의이벤트핸들러속성에직접코드삽입 </h3> <hr> <h2 id=c_2> 텍스트를클릭해보세요 </ h2> <script > function Click() { c_2.style.color = "red" } document.all.c_2.onclick = Click; </ script> </ body> </ html> 14
event_2.html 을실행하면출력되는데텍스트를클릭하면텍스트의색이붉게변하는것을확인할수있다. 15
세번째방법은 <script> 태그안에이벤트이름, 이벤트를받을객체와이벤트핸들러코드를한꺼번에작성하는방법이다. 아래예제를작성하고 event_3.html 이라는이름으로저장한다. <html> <head><title>event 작성예제 </ title> </ head> <body> <h3>script 태그를직접사용 </h3> <hr> <h2 id=c_3> 텍스트를클릭해보세요 </ h2></ p> <script for=c_3 event=onclick> c_3.style.borderwidth = 5; c_3.style.borderstyle="inset"; c_3.style.bordercolor="black"; </ script> </ body> </ html> 16
event_3.html 을실행하면출력되는데, 텍스트를클릭하면테두리굵기 5 와검정색의보더가그려진다. 17
3) 이벤트핸들러 이벤트핸들러는이벤트핸들러를사용하고자하는곳에서 HTML 태그의한속성으로지정될수있음 속성의이름은해당이벤트이름앞에 on 을붙이면됨 이벤트핸들러를정의할때주의해야할점은어떤값을리턴하느냐에따라이벤트처리가달라짐 true 를리턴하면이벤트대상객체에이벤트가전달되고, false 를리턴하면이벤트가끝남 다음예제는문서를읽었을때발생하는 load 이벤트와사라질때발생하는 unload 이벤트를처리하는이벤트핸들러이다. 다음과같이이벤트핸들러에대한간단한예제인 js04.html 을작성한다. 18
<html> <head> <title> 이벤트핸들러예제 </title> </ head> <body onload="alert(' 환영합니다.');" onunload="alert(' 또방문해주세요!');"> <center> <h1> 홈페이지 </ h1> </ center> </ body> </ html> 프로그램을수행시키면문서를읽었을때발생하는 load 이벤트에의해알림창이나타난다. 19
확인버튼을클릭한후웹브라우저창의닫기버튼을클릭해보자. 문서가사라질때발생하는 unload 이벤트에의해또다른알림창이나타나는것을확인할수있다. 20
다음과같이작성하고 click.html 이라는이름으로저장한다. <html> <head> <title> 이벤트핸들러예제 </title> </ head> <body> <center> <span onclick="alert(' 클릭하셨습니다.');"> <h3> 여기를클릭해보세요!</ h3> </ span> <span ondblclick="alert(' 더블클릭하셨습니다.');"> <h3> 여기를더블클릭해보세요!</ h3> </ span> </ center> </ body> </ html> 21
프로그램을수행시킨다음 여기를클릭해보세요! 라는문구를클릭하면한번클릭했을때발생하는 click 이벤트에의해알림창이나타나고 여기를더블클리해보세요! 라는문구를더블클릭하면더블클릭에반응하는 dblclick 이벤트에의해알림창이나타난다. 22
8.1 이벤트와이벤트핸들러 <form> 태그와자바스크립트를연결하여다음과같은예제를작성하고 key.html 이라는이름으로저장하자. <html> <head> <title> 이벤트핸들러예제 </ title> <script language="javascript"> function key(tx){ document.f.txt.value= ""; document.f.txt.value= tx; } </ script> </ head> <body> <form name="f"> <h3> 키테스트 </ h3> <input type="text" id="text1" name="t" value="" onkeydown="key(' 키가눌렸습니다.');" > <h3> 키이벤트들 </ h3> <input type="text" name="txt" value="" > </ form> </ body> </ html> 23
위소스를보면자바스크립트로 function key(tx) 라는함수를미리만들어두어문자열을받을수있게하였다. <form> 태그로 text 타입의 input 상자를만들어주어 input 상자에키보드로문자를입력하면 keydown 이벤트가발생하여 key(tx) 함수에 키가눌렸습니다. 라는메시지가저장되고아래생성된 input 상자는이를호출하여메시지를출력해준다. key.html을브라우저로실행시켜보면창이뜨고키테스트입력란에아무키나입력해보자. 24
키를누르는동시에이벤트가발생하여메시지가출력된다. 25
다음예제는 blur 과 focus 이벤트를사용한예제이다. 아래와같이작성하고 onfocus.html 이라는이름으로저장한다. <html> <head> <title> 이벤트핸들러예제 </title> </ head> <body bgcolor="blue" onblur="document.bgcolor='red'"onfocus= "document.bgcolor='blue'"> <center> <h3> 창의활성여부에따라바탕색이변화됩니다.</h3> </ center> </ body> </ html> 위소스를보면 <body> 태그에서바탕색이파란색으로지정되어있는데, blur 이벤트속성으로배경색을빨간색으로지정해주어포커스가창을떠나면배경색이붉게변하고다시창으로포커스가돌아오면 focus 이벤트에의해배경색이파랑색으로변하게된다. 26
onfocus.html 을실행시키면파란색바탕화면의창이뜬다. 27
창을비활성시키면 blur 이벤트에의해바탕색이빨간색으로바뀌게된다. 28
아래예제는 onchange 핸들러를이용하여주민등록번호를입력받아입력받은숫자의자리수를검사하는예제이다. onchange.html 이라는이름으로저장하자. <html> <head><title>onchange 이벤트 </ title> <script> function ch(t, n) { if(t.value.length!= n) { alert(n+ " 개의숫자를입력하세요!!"); t.value = ""; return false; } else return true; } </ script> </ head> <body > <h3> 입력받은주민등록번호를검사하여포커스를제한하는예제 </h3> <hr><br> <table width="250" height="30" border="1" cellpadding="0" cellspacing="0" bordercolor="# 999999"> <tr> <td width="95" bgcolor="# CCCCCC"> 주민등록번호 : </ td> <td width="149" align="center"> <input name="num1" type="text" id="num1" onchange="return ch(this, 6)" value="" size="6"> - <input name="num2" type="text" id="num2" onchange="return ch(this, 7)" value="" size="7"></ td> </tr> </ table><p><br></ body></ html> 29
onchange 핸들러는 select, text, textarea 3 객체에서만발생하는이벤트로서포커스를잃을때발생한다. 소스를보면주어진개수만큼숫자가입력되지않으면 check 함수에서 false 를리턴하여다른곳으로포커스를이동시키지못하게한다. onchange.html 을실행해보면그림과같이출력되는것을확인할수있다. 30
8.1 이벤트와이벤트핸들러 다음예제는 onkeydown, onkeypress, onkeyup 을사용하여키를테스트하는페이지이다. onkey.html 이라는이름으로저장한다. <html> <head><title>onkeydown, onkeypress, onkeyup 이벤트 </ title> <script> function k_d(text) { document.form.tarea.value = "Event : Key Down\ n"; } function k(s) { document.form.tarea.value += s + "\ n"; } </ script></ head> <body> <h3> 키이벤트핸들러 (onkeydown, onkeyup, onkeypress)</ h3><hr> 아래창에키를입력하면입력하는동안발생하는이벤트들이키이벤트들창에나타난다. <form name="form"> <P> <table border="1" cellpadding="0" cellspacing="0" bordercolor="# CC6699"> <tr> <td> 키테스트 </ td> <td> 키이벤트 </ td> </tr> <tr> <td valign="top"><input type="text" name="txt" onkeydown="return k_d(this)" onkeyup="return k('event : Key Up ') onkeypress="return k('event : Key Press ')"></ td> <td><textarea name="tarea" rows=4> </ textarea></ td> </ tr> </ table> <P><br> <P><br> </ form></ body></ html> 31
onkeydown 은키가눌리는순간발생하고, onkeyup 는눌러진키가올라오는순간발생한다. 그런데여기서주목할만한점은 onkeypress 이다. onkeypress 는문자키숫자키뿐만아니라기타문자키와시스템키 (esc, spacebar, enter 키 ) 에도누르는순간발생한다. 32
8.1 이벤트와이벤트핸들러 다음예제는마우스에관련된이벤트를이용하여다양한반응을확인할수있게만들어진예제이다. onmouse.html 이라는이름으로저장한다. <html> <head><title>onmouse 이벤트 </ title> <script> var width=15; function Bg(o, color) { o.style.backgroundcolor = color; } function Border(o) { o.style.borderstyle = "ridge"; o.style.borderwidth = width; window.status = window.event.wheeldelta; if(event.wheeldelta < 0) { width- - ; if(width < 0) width = 0; } else width++; } function mouse(event, color) { document.bgcolor = color; } </ script> </ head> <body> <h3> 마우스와관련된이벤트핸들러예 </h3> <hr> <div onmousedown="bg(this, 'green')" onmouseup="bg(this, 'blue')" onmouseover="bg(this, 'red')" onmouseout="bg(this, 'skyblue')" onmousewheel="border(this)"> <p> 이문장위로마우스를움직이면이문장의색깔이변합니다.</ p> <p> 또한마우스휠을굴려보세요. 테두리가변합니다. </p> </ div> <p> <a href="http://www.daum.net" onmouseover="mouse('onmouseover', 'pink') onmouseout="mouse('onmouseout', 'green')" onmousedown="mouse('onmousedown', 'blue')"> 배경색깔을변경하려면링크위로마우스를움직여보세요.</ a><p> </ body> </ html> 33
마우스를첫번째문장에올리면배경색이변하는것을볼수있고두번째문장에서는마우스휠을굴리면 onmousewheel 핸들러가호출되면서보더가변하는것을확인할수있다. 34
8.2 event 객체 event 객체는마우스의클릭이나키보드를누르는등사용자의행위가있을때나타나는 event 를제어하고관리할수있다. 다음은기본사용법이다. window.event. 속성 event. 메소드 35
8.2 event 객체 event 객체는다음과같은속성을가진다. event 객체 속성 altkey altleft button clientx clienty ctrlkey ctrlleft fromelement key keycode offsetx offsety alt키를누르면 true 왼쪽 alt키를누르면 true 마우스버튼을누를경우이벤트발생 1= 왼쪽, 2= 오른쪽, 3= 왼쪽과오른쪽, 4= 가운데, 5= 왼쪽과가운데, 6= 오른쪽과가운데, 7= 모두누름윈도우영역중마우스의 x 좌표값윈도우영역중마우스의 y 좌표값 ctrl 키를누르면 true 왼쪽 ctrl키를누르면 true onmouseover나 onmouseout 이벤트사용시마우스객체가리킴 code 키를눌렀을때키의유니코드값을설정키보드의키값을전달받음이벤트가발생한객체에서마우스의 x 좌표값이벤트가발생한객체에서마우스의 y 좌표값 propertyname 이벤트가발생한객체에서변경된속성이름을설정 36
8.2 event 객체 속성 repeaton reason returnvalue screenx screeny shiftkey shiftleft srcelement srcfilter toelement type x y keydown 이벤트의반복횟수설정데이터의전송상태이벤트가발생한값을 true 또는 false로설정전체화면에서마우스의 x 좌표값설정전체화면에서마우스의 y 좌표값설정 shift 키를누르면 true 왼쪽 shift키를누르면 true 이벤트를발생한객체를가리킴 onfilterchange 이벤트를발생시킨 filter 객체를설정마우스커서가위치해있는객체를설정이벤트객체의이벤트종류를설정선택한객체의상대적인 x 좌표값을설정선택한객체의상대적인 y 좌표값을설정 37
8.2 event 객체 다음은임의의지점을마우스로클릭하면클릭한지점의좌표값을출력하여주는예제이다. event.html 이라는이름으로저장하자. <html> <head> <title>event 객체다루기 </ title> <script language="javascript"> function clickevent(obj){ var x = obj.clientx; var y = obj.clienty; msg = " 브라우저의좌표 ("+ x +", " + y + ") 지점 "; alert(msg); } ; </ script> </ head> <body onclick="clickevent(event);"> <h3>event 객체 </ h3><hr><br> 브라우저의아무곳이나클릭해보세요!<p> </ body> </ html> 38
8.2 event 객체 임의의점을클릭하자. 클릭한지점의좌표값을경고창으로출력해주는것을확인할수있다. 39
8.2 event 객체 다음예제는 event 객체의 srcelement 프로퍼티들을보여주는예이다. srcelement.html 이라는이름으로저장하자. <html> <head><title>srcelement 프로퍼티예 </ title> <script> function print(text) { var so = event.srcelement; r = so.getclientrects(); object.style.top = r[ 0].bottom; object.style.left = r[ 0].left; object.style.backgroundcolor = "cyan"; object.style.borderwidth = "1px"; object.style.borderstyle = "solid"; window.status= so.style.top + "," + so.style.left; object.style.position = "absolute"; object.style.visibility="visible"; object.innertext = text; } function hidden() { object.style.visibility="hidden"; } </ script> </ head> <body> <h3>event 객체의 type 과 srcelement 의사용예 </ h3> 아래의시에서빨간색텍스트, 이미지, 링크위에마우스를올려보시오. <hr> <div id="object"></ div> <div> <pre> 40
8.2 event 객체 죽는날까지 <span style="color:red" onmouseover="print('sky')" onmouseout="hidden()"> 하늘을 </span> 우러러한점부끄럼이없기를, 잎새에이는바람에도나는괴로와했다. <span style="color:red" onmouseover="print('star')" onmouseout="hidden()"> 별 </ span> 을노래하는마음으로모든죽어가는것을사랑해야지. 그리고나한테주어진길을걸어가야겠다. 오늘밤에도별이바람에스치운다. </ pre> </ div> <img src="img_1356.jpg" onmouseover="print(' 아름답습니다.')" onmouseout="hidden()"> <p> <a href="http:// www.naver.com" onmouseover="print(' 클릭하면네이버에접속합니다 ')" onmouseout="hidden()"> 네이버에접속하는링크입니다.</a> </ body> </ html> 41
8.2 event 객체 위소스에서시에두개의 span 객체에 onmouseover 핸들러를설치하여마우스가올라가면이벤트가발생하여설명문이출력된다. draw() 함수는이벤트가발생한객체의위치를알아내는데사용된다. srcelement.html 을실행하면붉은글씨위나이미지, 링크위에마우스를올리면설명문이출력되는것을확인할수있다. 42
8.2 event 객체 다음예제는마우스와관련된 event 객체의속성들을보여준다. mouse.html 이라는이름으로저장하자. <html> <head><title> 마우스위치 </ title> <style>.div { background- color:green; width:300; height:100; } </ style> <script> function position() { var s = " 버튼 =" + event.button + "\ n"; s = s + "( 웹브라우저기준 X 좌표, 웹브라우저기준 Y 좌표 )=" + event.clientx + "," + event.clienty + "\ n"; s = s + "( 화면기준 X 좌표, 화면기준 Y 좌표 )=" + event.screenx + "," + event.screeny + "\ n"; s = s + "( 이벤트발생객체기준 X 좌표, 이벤트발생기준 Y 좌표 )=" + event.offsetx + "," + event.offsety + "\ n"; s = s + "(x, y)="+ event.x + "," + event.y + "\ n"; objdiv.innertext = s; } </ script> </ head> <body onclick="position()"> <h3>event 객체의마우스와관련된프로퍼티액세스예제 </h3> <hr> 이미지이외의부분을클릭하면좌표값을출력합니다.<br> 이미지위에서는마우스의위치를지속적으로추적하여줄것입니다.<p> <img src="img_1356.jpg" onmousemove="position()"><p> <div id="objdiv" class="div"> 43
8.2 event 객체 위소스에서 screenx, screeny는모니터전체를기준으로왼쪽위의모서리를 (0,0) 으로기준하여위치를출력하고, clintx, clinty는출력된웹브러우저를기준으로하며, offsetx, offsety는마우스이벤트가발생한객체의왼쪽상단모서리를기준으로한다. mouse.html을실행하면그림과같이출력되는것을확인할수있다. 44
8.2 event 객체 다음예제는키입력과관련한속성을보여준다. 아래소스를 keypress.html 이라는이름으로저장한다. <html> <head><title> 키입력 </ title> <style>.m { width:150; height:50; } </ style> <script> function key() { var s = "" object.innerhtml = s; if(event.altkey) { if(event.altleft) s += " 왼쪽 ALT 키눌림 "; else s += " 오른쪽 ALT 키눌림 "; s += "<br>"; } if(event.shiftkey) { if(event.shiftleft) s += " 왼쪽 SHIFT 키눌림 "; else s += " 오른쪽 SHIFT 키눌림 "; s += "<br>"; } 45
8.2 event 객체 if(event.ctrlkey) { if(event.ctrlleft) s += " 왼쪽 CTRL 키눌림 "; else s += " 오른쪽 CTRL 키눌림 "; s += "<br>"; } s += String.fromCharCode(event.keyCode) + " 키가눌림 " object.innerhtml = s; } </ script> </ head> <body> <h3> 이벤트객체의키입력에관련된속성예제 </h3> <hr> <p> 아래창에아무키나눌러보세요.<br> <table width="350" height="83" border="0" cellpadding="0" cellspacing="0"> <tr align="center" valign="middle"> <td height="83"><input name="text" type="text" id="txt" onkeydown="key()"></ td> <td align="left" valign="bottom"><div id="object" class="m"></ div></ td> </tr> </ table> </ body> </ html> 46
8.2 event 객체 위예제에서 onkeypress 이벤트가 alt,ctrl 키에대해서발생하지않기때문에 onkeydown 이벤트핸들러를사용한것을볼수있다. 47