|
이벤트 코드를 HTML 속에 삽입하거나 Javascript로 삽입하면, 예를 들어 단추를 누른다거나 마우스를 이동시키는 등에 의하여, 어떤 이벤트를 발생 시켜 추가적인 작업을 실행하게 할 수 있으므로 대단히 유용하다. 사용에 있어 HTML 속성과 JavaScript 코드을 구별하여야 한다. HTML 속성HTMLeventHandler='JavascriptCode'
주의할 점은 <SCRIPT language=javaSCRIPT></SCRIPT> 속이 아니라 HTML 태그 속 HTMLeventHandler(이벤트처리자)이므로 Javascript 코드가 아니라 HTML 속성이라는 점이다. 그러나 따옴표 속의 내용은 스크립트로 간주되고 스크립트 언어 명시가 없으면 Javascript 로 해석된다. HTML속성이므로 대소문자를 구별하지 않아 onMouseOver, onmouseover, ONMOUSEOVER 모두 동일하게 사용될 수 있다. <FORM><INPUT type="button" value="클릭해 보라." onClick="alert('안녕하세요!')"></FORM>
Javascript 코드object.onclick='JavascriptCode'
그러나 Javascript 개체 이벤트처리자는 모두 소문자이고, 대소문자를 구별하여 대소문자가 틀리면 오류가 발생한다. <FORM name="form1"><TABLE border=0 width=100%><TR> <TD width=250><DIV style=white-space:nowrap> <INPUT type="button" name="button1" value="마우스를 눌러 보라" onClick="timer=window.setInterval('clock()',50);"> <INPUT type=button value="타이머 중지" onClick="if (timer) window.clearInterval(timer)"></DIV></TD> <TD width=20 id="secArea"> <! 초 표시 위치></TD> <TD width=60 span id="imagearea"> <! 이미지 표시 위치></TD> <TD width=210 span id="Clock" style=white-space:nowrap;font-size:9pt;vertical-align:bottom> <! 시각 표시 위치></TD> </TR></TABLE></FORM> <SCRIPT> var timer=''; function Call(numb){ // 이미지 병화시키는 기능함수 시작 if (numb){ // 마우스 누른 효과를 발생시킨다 form1.button1.onmousedown=imagearea.innerHTML='<IMG src="../../../gif/rfexample.gif">'; } else{ // 마우스 눌럿다 놓은 효과를 발생시킨다 form1.button1.onmouseup=imagearea.innerHTML=' '; }; } // 이미지 변화시키는 기능함수 종료 function clock(){ // 타이머 기능함수 시작 now=new Date(); // 현재 시각을 얻어 now에 할당한다 second=secArea.innerHTML=now.getSeconds(); // now에서 초를 얻어 second에 할당하고 출력한다 Clock.innerHTML=now.toLocaleString(); // now의 시각의 문자열을 얻어 출력한다 Call(second%2); // 초를 2로 나눈 나머지를 인수로 기능함수를 호출한다. 0은 짝수, 1은 홀수 } // 타이머 기능함수 종료 </SCRIPT> Javascript 이벤트처리자는 해당 |
