KoXo 자바스크립트 - 이벤트(event) 예제

이 페이지를 읽으면서...

<HEAD>
<SCRIPT language=javaSCRIPT>
function Loading(){ // 로딩이 완료되면 환영 메시지를 낸다.
  alert('메인 페이지가 로딩 완료되었습니다.\n어서오세요');
}
function Unloading(){ // 언로딩되면 환송 메시지를 낸다.
  alert('창을 닫거나 다른 페이지로 가서 현 메인 페이지가 언로딩 완료되었습니다.\n안녕히 가세요');
}

document.onload=Loading(); // Javascript로 기능함수 호출
</SCRIPT>
</HEAD>

<BODY onUnload="Unloading()"> <! HTML로 기능함수 호출>

<SCRIPT>
iexp='../../../gif/rfexample.gif';
ieve='../../../gif/rfevent.gif';
iblk='zblank.html';

function toLoad(img){
  if (img==iblk) str='<IFRAME src='+iblk+
    ' height="40" onLoad="okLoad(this.src)" onUnload="okUnload(this.src)" scrolling=no></IFRAME>';
  else str='<IMG src='+img+' onLoad="okLoad(this.src)" onUnload="okUnload(this.src)" height=30 style="margin:5">';
  frame1.innerHTML=str;
}
function okLoad(src){
  frame2.innerHTML='<FONT color=red>'+src+' 로딩 완료</FONT>'; // 경고 발생시는 alert(src+' 로딩 완료');
}
function okUnload(src){
  frame2.innerHTML='<FONT color=blue>'+src+' 언로딩 완료</FONT>'; // 경고 발생시는 alert(src+' 언로딩 완료');
}
</SCRIPT>

<DIV id="frame1" class=show style="width:400px;height:40;text-align:center">
  <iframe src="zblank.html" height="40" onLoad="okLoad(this.src)"
    onUnload="okUnload(this.src)" scrolling=no></iframe>
</DIV>
<DIV id="frame2" class=show style="width:400px;text-align:center"></DIV>

<FORM style="margin-left:70">
  <INPUT type="button" value="빈페이지 열기" onClick="toLoad(iblk)">
  <INPUT type="button" value="예제 이미지 열기" onClick="toLoad(iexp)">
  <INPUT type="button" value="이벤트 이미지 열기" onClick="toLoad(ieve)">
</FORM>

object.innerHTML은 id로 지정한 개체의 내용을 HTML 태그로 제공하는 것이다.