1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다. 이벤트에대비해미리수행할행동을코드로작성해놓고이벤트가발생됐을때정의된코드를실행하는것이이벤트핸들러의역할입니다. 이벤트핸들러는이벤트에 on 을붙이는형식으로작성되며 HTML 태그에포함시켜사용합니다. <TAG eventhandler= 자바스크립트코드 > <input type= button onclick= test(); > 2. 이벤트와이벤트핸들러의종류 이벤트 이벤트핸들러 설명 사용되는객체및태그 abort onabort 문서나 이미지를 읽는 도중 img 중지할때발생 blur onblur 포커스를잃어버렸을때발생 모든폼요소, body, window 객체 click onclick 마우스를했을때발생 a, area, input type=button, checkox, radio, reset, submit, dblclick ondblclick 마우스를 더블 했을 때 a, area, input type=button, 발생 checkox, radio, reset, submit, change onchange 폼요소의값이변경되었을때 input type=text, select, 발생 textarea focus onfocus 포커스가주어졌을때발생 모든폼요소, body, window 객체 keydown onkeydown 키를눌렀을때발생 a, area, img, textarea, keypress onkeypress 키를눌렀다놓았을때발생 a, area, img, textarea, keyup onkeyup 키를놓았을때발생 a, area, img, textarea, mousedown onmousedown 마우스버튼을눌렀을때발생 a, area, input type=botton, mouseup onmouseup 마우스버튼을놓았을때발생 a, area, input type=botton, mousemove onmousemove 마우스가움직일때발생 mouseout onmouseout 마우스포인터가특정한객체를벗어났을때발생 a, area mouseover onmouseover 마우스 포인터가 해당 요소 a, area 위에놓였을때발생 reset onreset Reset 버튼을눌렀을때발생 form resize onresize 프레임이나 윈도우 크기가 window 객체 변경될때발생 select onselect 폼 요소의 특정 필드를 input type=text, textarea 선택했을때발생 submit onsubmit Submit 버튼을눌렀을때발생 form load onload 문서를읽을때발생 img, body, frameset, window 1 / 6
객체 unload onunload 문서에서빠져나갈때발생 body, frameset, window 객체 * 색이칠해진이벤트에대한이벤트핸들러는대부분의 HTML 태그에서사용할수 있습니다. 3. 이벤트핸들러사용하기 1) onload / onunload 웹문서가로드될때 " 안녕하세요?" 메시지상자를표시하고언로드될때 " 안녕히가세요 ~" 메시지상자를표시한다. <exam_09_01.html> <body onload="alert(' 안녕하세요?')" onunload="alert(' 안녕히가세요 ~')"> <09_01.jpg> 2 / 6
2) onfocus / onblur 텍스트박스가포커스를얻으면상태표시줄에 " 포커스를얻었습니다." 포커스를잃으면 " 포커스를잃었습니다 " 를표시한다. <exam09_02.html> <script language="javascript"> <!-- function display(message ) { window.status=message --> </script> *** onfocus, onblur example *** <br> <form> <input type="text" onfocus="display('focus를얻었습니다 ')" 잃었습니다 ')"> </form> onblur="display('focus 를 <09_02.jpg> 3 / 6
3) onclick, ondblclick " 하세요 " 버튼을했을때 " 안녕하세요 " 메시지상자를 " 더블하세요 " 버튼을했을때 " 두번안녕하세요 " 메시지상자를표시한다. <exam09_03.html> *** onclick, ondblclick example *** <br> <form> <input type="button" value=" 하세요 " onclick="alert(' 안녕하세요 ')" > <input type="button" value=" 더블하세요 " ondblclick="alert(' 두번안녕하세요 ')"> </form> <09_03.jpg> 4 / 6
4) onmouseover, onmouseout http://www.korea.go.kr 로링크되는 " 대한민국 " 하이퍼링크텍스트에마우스를올려놓으면 "Mouse Over" 메시지상자를, 마우스를아웃시키면 "Mouse Out" 메시지상자를표시한다. <exam09_04.html> <script language="javascript"> <!-- function over_message() { alert("mouse Over") function out_message() { alert("mouse Out") --> </script> *** onmouseover, onmouseout example *** <br><br> <a href="http://www.korea.go.kr" onmouseover="over_message( )" > 대한민국 (mouseover) </a> <br> <br> <a href="http://www.korea.go.kr" onmouseout="out_message( )"> 대한민국 (mouseout) </a> <09_04.jpg> 5 / 6
5) onchange 텍스트상자에이름을입력한후텍스트상자바깥쪽을하면 " 상자에입력된이름님반갑습니다." 메시지상자표시한다. <exam09_05.html> <script language="javascript"> <!-- function chk_change(str) { alert(str + " 님반갑습니다 ") --> </script> *** onchange example *** <br><br> 이름입력을입력한후텍스트상자바깥쪽을하세요!<br> <form> <input type="text" size=40 onchange="chk_change(this.value)"> </form> <09_05.jpg> 6 / 6