[ 7강 ] 이벤트핸들러

♥ 이벤트(Event)는 웹 페이지에서 수행하는 동작을 의미하는데 가령 [저장] 버튼을 클릭하는 것을 이벤트라고 말한다.♥ 이밴트핸들러(EventHandler)는 이벤트가 발생했을 경우 처리하는 코드를 의미한다.  즉 함수의 역할이라고 볼수 있다. ※ 아래표는 이벤트와 이벤트핸들러를 연결하는 이벤트핸들러 속성들이다. (주요한것만 모음)<div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 579px; height: 308px;" border="1" data-ke-style="style6"><tbody><tr style="height: 10px;"><td style="width: 47.1px; height: 149px; text-align: center;" rowspan="10">on</td><td style="width: 113.225px; height: 10px;">blur</td><td style="width: 366.675px; height: 10px;">포커스를 다른곳으로 옮길 경우</td></tr><tr style="height: 17px;"><td style="width: 113.225px; height: 17px;">click</td><td style="width: 366.675px; height: 17px;">링크나 폼의 구성원을 클릭할 때</td></tr><tr style="height: 17px;"><td style="width: 113.225px; height: 17px;">change</td><td style="width: 366.675px; height: 17px;">선택값을 바꿀 경우</td></tr><tr style="height: 17px;"><td style="width: 113.225px; height: 17px;">focus</td><td style="width: 366.675px; height: 17px;">포커스가 위치할 경우</td></tr><tr style="height: 17px;"><td style="width: 113.225px; height: 17px;">mouseover</td><td style="width: 366.675px; height: 17px;">마우스가 올라올 경우</td></tr><tr style="height: 17px;"><td style="width: 113.225px; height: 17px;">mouseout</td><td style="width: 366.675px; height: 17px;">마우스가 떠날 경우</td></tr><tr style="height: 17px;"><td style="width: 113.225px; height: 17px;">mousedown</td><td style="width: 366.675px; height: 17px;">마우스를 누를 경우</td></tr><tr style="height: 17px;"><td style="width: 113.225px; height: 17px;">mousemove</td><td style="width: 366.675px; height: 17px;">마우스를 움직일 경우</td></tr><tr style="height: 10px;"><td style="width: 113.225px; height: 10px;">mouseup</td><td style="width: 366.675px; height: 10px;">마우스를 눌렀다 놓을 경우</td></tr><tr style="height: 10px;"><td style="width: 113.225px; height: 10px;">load</td><td style="width: 366.675px; height: 10px;">페이지가 열릴 때</td></tr></tbody></table></div><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 73.3236%; height: 40px;" border="1" data-ke-style="style5"><tbody><tr style="height: 10px;"><td style="width: 8.13621%; height: 40px;" rowspan="4">on</td><td style="width: 16.9213%; height: 10px;">unload</td><td style="width: 50.6506%; height: 10px;">현재의 브라우저,윈도우를 떠날 때</td></tr><tr style="height: 10px;"><td style="width: 16.9213%; height: 10px;">keydown    </td><td style="width: 50.6506%; height: 10px;">키 입력시</td></tr><tr style="height: 10px;"><td style="width: 16.9213%; height: 10px;">keypress    </td><td style="width: 50.6506%; height: 10px;">키 누를 때</td></tr><tr style="height: 10px;"><td style="width: 16.9213%; height: 10px;">keyup        </td><td style="width: 50.6506%; height: 10px;">키를 누르고 놓았을 때 </td></tr></tbody></table></div> { 실습예제 } 예제1)   온load    - 화면이 열릴때 반응을 하는 이벤트핸들러로 body 전용이라고 볼 수가 있다. <body  온load="alert(‎'안녕하세요.')"> 예제2)  온change- 오브젝트의 선택값이 바뀔때 반응을 하는 이벤트 핸들러로   select 상자 전용이라고 볼 수 있다.- 아래 소스의 this는 해당 오브젝트를 말하며 ,  자바의 표현으로 객체를 의미한다. 출생년도 : <select name="year"  온change="alert(‎this.value)" >                         <option value="2010">2010</option>                         <option value="2011">2011</option>                         <option value="2012">2012</option>                  </select>   예제3) <script> // 전역변수 var cnt1=0; var cnt2=0; var cnt3=0; function fn_count(a) {       if(a == 1) {            cnt1++;            document.frm.box1.value = cnt1;       } else if(a == 2) {            cnt2++;            document.frm.box2.value = cnt2;       } else if(a == 3) {            cnt3++;            document.frm.box3.value = cnt3;      } } </script> <body> <form name="frm"> <table border="1" width="300">      <tr>           <td height="30" 온mousemove="fn_count(1)">온mousemove</td>           <td>                <input type="text" name="box1" value="0" size="3">           </td>      </tr>      <tr height="50">            <td height="30" 온mouseover="fn_count(2)">온mouseover</td>            <td>                 <input type="text" name="box2" value="0" size="3">            </td>       </tr>       <tr height="50">            <td height="30" 온mouseout="fn_count(3)">온mouseout</td>            <td>               <input type="text" name="box3" value="0" size="3">            </td>      </tr> </table> </form> </body> 예제6) <script> function fn_color(color) {          document.bgColor = color;         // document.body.style.background=color; } </script> <body> <table>        <tr>            <td width="60" height="60" bgcolor="yellow"  온mouseover="fn_color('yellow')"   온mouseout="fn_color('white')"></td>      </tr>      <tr>            <td width="60" height="60"  bgcolor="pink"     온mouseover="fn_color('pink')"      온mouseout="fn_color('white')"></td>      </tr> </table></body></html> 예제7)<table> <script> var color=["00","33","66","99","cc","ff"];  for( var i=0; i<=5; i++ ) {       for( var j=0; j<=5; j++ ) {            for( var k=0; k<=5; k++ ) {                  var c = color[i]+color[j]+color[k];                 // 000000, 000033, 000066, 000099, 0000cc, 0000ff                 // 003300, 003333, 003366, 003399, 0033cc, 0033ff                 // 006600, 006633, 006666, 006699, 0066cc, 0066ff                 // 009900, 009933, 009966, 009999, 0099cc, 0099ff                 // 00cc00, 00cc33, 00cc66, 00cc99, 00cccc, 00ccff                 // 00ff00, 00ff33, 00ff66, 00ff99, 00ffcc, 00ffff                 // 330000, 330033, 330066, 330099, 3300cc, 3300ff                 // 333300, 333333, 333366, 333399, 3333cc, 3333ff                 document.write("<tr><td bgcolor=\"#"+c+"\"  온MouseOver=\"document.bgColor='#"+c+"'\">"+c+"</td></tr>");            }      }  } </script> </table>  (실습1)(1)  두 입력상자를 이용하여 copy 테스트 :     on ~  keypress / keyup / keydown을 실습한다.(2)  체크 박스를 이용하여 쇼핑몰의 주소 copy 기능을 실습한다. <style> body {         line-height:2.0; } </style><body> <form name="frm"> 1. <input type="text" name="a1" > 2. <input type="text" name="a2"  온keypress="" > (on keypress)  3. <input type="text" name="a3"  온keyup=""> (on keyup)     4. <input type="text" name="a4"  온keydown=""> (on keydown)   기본주소  <input type="text" name="addr1" value="서울시 강남구 논현동">  <input type="checkbox" name="chk"  온click="fn_copy()"> 위 주소와 동일합니다. 배송지  <input type="text" name="addr2"> </form> </body>