<html>
<head>
<script type="text/jscript">
function checkIn()
{
alert("방문환영");
}
function checkOut()
{
alert("퇴거환영");
}
</script>
</head>
<body onLoad="checkIn()" onUnload="checkOut()" onResize="document.bgColor='gray';">
<ul><h2>이벤트</h2>
사용자가 키보드를 누르거나, 마우스를 누르거나, 문서를 읽어왔을때 마다 일어나는 동작<br>
이벤트 핸들러 :이벤트가 발생했을때 처리하도록 지원해 두는것.<br>
on이벤트이름 = "이벤트 처리함수나 메소드"<br>
ex)<body onLoad="start()"><br>
<ul>이벤트 종류
<li>click : 마우스 클릭
<li>dblclick : 마우스 더블 클릭
<li>mousedown : 마우스 버튼 눌렀을때
<li>mouseup : 마우스 눌렀다가 놓았을때
<li>mouseover : 마우스 영역위에 진입할때
<li>mouseout : 마우스 영역 벗어날때
<li>mousemove : 마우스 움직일때
<li>dragdrop : 드래그 앤 드랍할때
<li>focus : 입력 포거스 생길때(글자 적을 커서 깜박일때)
<li>blur : 입력양식에서 포커스가 다른곳으로 이동할때.
<li>select : 입력양식에서 선택할때
<li>change : 입력양식에서 내용이 바뀔때
<li>submit : 입력양식을 서버로 보낼때
<li>reset : 입력양식내용을 새로적을때
<li>load : 웹브라우저 문서 읽을때
<li>unload : 웹브라우저 문서 닫을때
<li>abort : 이미지 읽기를 강제로 중단할때
<li>error : 에러가 발생할때
<li>keydown : 키보드 눌렀을때(이후 keypress이벤트 발생)
<li>keypress : 키보드 키를 눌렀을때(영문,숫자만 해당)
<li>keyup : 키보드 눌렀다 놓았을때
<li>move : 윈도우나 프레임을 움직였을때
<li>resize : 윈도우나 프레임의 크기 조정했을때.
</ul>
<ul>
<xmp>
<script type="text/jscript">
function on2()
{
document.bgColor="blue";
}
function on3()
{
document.bgColor="beige";
}
</script>
<input type="button" value="누르면 바탕색 파랑으로 바꿈" onMouseDown="on2()" onMouseUp="on3()">
</xmp>
<li>click : 입력양식 클릭시 발생<br>
<script type="text/jscript">
function on2()
{
document.bgColor="blue";
}
function on3()
{
document.bgColor="beige";
}
</script>
<input type="button" value="누르면 바탕색 파랑으로 바꿈" onMouseDown="on2()" onMouseUp="on3()">
<br>
<li>load,unload : 이미 넣어놨으니. 문서열때 봤을테고, 닫음 볼수 있을것.<br>
<xmp>
<head>
<script type="text/jscript">
function checkIn()
{
alert("방문환영");
}
function checkOut()
{
alert("퇴거환영");
}
</script>
</head>
<body onLoad="checkIn()" onUnload="checkOut()">
</xmp>
<br>
<li>abort : 이미지 읽는 동안 중지할때<br>
<xmp>
<img src="
http://wstatic.naver.com/w9/lg_naver_v3.gif" onAbort="alert('이미지 로딩이 중지');">
</xmp>
<img src="
http://wstatic.naver.com/w9/lg_naver_v3.gif" onAbort="alert('이미지 로딩이 중지');">
<br>
<li>blur/focus
<xmp>
<input type="text" size="100" onBlur="document.bgColor='yellow'" onFocus="document.bgColor='green'">
</xmp>
<input type="text" size="100" onBlur="document.bgColor='yellow'" onFocus="document.bgColor='green'">
<li>dblclick<br>
<xmp>
<input type="text" onDblClick="alert('더블클릭');">
</xmp>
<input type="text" onDblClick="alert('더블클릭');">
<br>
<li>change
<xmp>
<input type="text" onChange="alert('내용이 변경');">
아래 입력박스에 글자적고 나오면.. 이벤트 발생...
</xmp>
<input type="text" onChange="alert('내용이 변경');">
<br>
<li>moseover,mouseout<br>
<xmp>
<input type="text" onMouseover="alert('입력위');" onMouseout="alert('입력벗어남');">
</xmp>
<input type="text" onMouseover="alert('입력위');" onMouseout="alert('입력벗어남');">
<li>keypress,keydown,keyup
<xmp>
<input type="text" onKeypress="alert('누름 띄지마~~');" onKeydown="alert('결국 눌렀군');" onKeyup="alert('결국 떼었군');">
</xmp>
<input type="text" onKeypress="alert('누름 띄지마~~');" onKeydown="alert('결국 눌렀군');" onKeyup="alert('결국 떼었군');">
<li>select<br>
<xmp>
글자입력후 드래그해서 선택하는 순간..<br>
<input type="text" onSelect="alert('선택');">
</xmp>
글자입력후 드래그해서 선택하는 순간..<br>
<input type="text" onSelect="alert('선택');">
<li>mousedown/mouseup<br>
<xmp>
<p>글자내 <a onMousedown="document.bgColor='red';" onMouseup="document.bgColor='beige';">색상을 마우스 눌렀을때와 놓았을때 차이점</a></p>
</xmp>
<p>글자내 <a onMousedown="document.bgColor='red';" onMouseup="document.bgColor='beige';">색상을 마우스 눌렀을때와 놓았을때 차이점</a></p>
<br>
<li>resize<br>
<xmp>
<body onResize="document.bgColor='gray';">
</xmp>
<li>submit/reset<br>
<form name="test1" onSubmit="alert('숩밑');" onReset="alert('레셑');">
<input tyep="text" value="12">
<input type="submit">
<input type="reset">
</form>
</ul>
</ul>
</body>
</html>
