onClick | onDblClick | onFocus | onBlur
Language/JAVASCRIPT 2010. 5. 10. 15:18cdfb.htm
onclick 이벤트에서 그림을 클릭하면 그림이 확대되었다가 다시 그림을 클릭하면 그림이 원상태로 돌아 가며 onfocus-onblur 이벤트에서는 마우스로 버튼을 클릭하거나 버튼1을 마우스로 클릭한 다음 탭 키로 초점을 이동시키면 이벤트를 확인할 수 있다.
<html>
<head>
<title>zoom</title>
<style>
<!--
span { font-weight:bold; font-size:18pt; color:white; background-color:black; }
-->
</style>
</head>
<body onload="addele();">
<script-x language="JavaScript-x">
function addele(){
zoomimg = document.createElement("IMG");
zoomimg.style.position = "absolute";
zoomimg.style.visibility = "hidden";
document.body.../data/lecture/hcjd/appendixcdChild(zoomimg);
}
var zoom = true
var magnify = 3
function display(e){
oObject = ((navigator.vendor)? e.target : event.srcElement);
if(oObject.tagName=="IMG"){
if(zoom){
with(zoomimg.style){
left = oObject.offsetLeft
top = oObject.offsetTop
width = (oObject.width) * magnify
height = (oObject.width) * magnify
visibility = "visible"
}
zoomimg.src = oObject.src
zoom = false
}else{
zoomimg.style.visibility = "hidden";
zoom = true
}
}
}
document.body.onclick=display
</script-x>
<p align="center"><span>onclick 이벤트</span><p>
<img src="board.gif" width="80" height="54" border="0" alt="board.gif">
<img src="creditcard_visa.gif" width="60" height="38" border="0" alt="creditcard_visa.gif">
<img src="f_wmelon01.gif" width="48" height="49" border="0" alt="f_wmelon01.gif">
<hr>
<p align="center"><span>onDblClick 이벤트</span>
<form name="oform">
<p><input type="button" name="dblbutton" value="xpert로 이동하기 위해서는 버튼을 더블 클릭 하세요" onDblClick="window.location='http://www.xpert.co.kr';"></p>
<hr>
<p align="center"><span>onFocus-onBlur 이벤트 </span>
<p id="blfo" style="font-size:20pt"> </p>
<p><input type="button" name="blurbtn" value="버튼1" onblur="document.getElementById('blfo').innerHTML='버튼1에서 blur이벤트가 발생했습니다.';">
<input type="button" name="midbtn" value="버튼2" >
<input type="button" name="focusbtn" value="버튼3" onFocus="document.getElementById('blfo').innerHTML='버튼3에서 focus이벤트가 발생했습니다.';">
</p>
</form>
</body>
</html>
<body onload="addele();">
문서를 읽어들이는 것을 완료하면 addele 함수를 호출한다.
function addele(){
zoomimg = document.createElement("IMG");
img 개체를 만든 다음 zoomimg라는 변수에 대입한다.
zoomimg.style.position = "absolute";
zoomimg.style.visibility = "hidden";
document.body.../data/lecture/hcjd/appendixcdChild(zoomimg);}
img 개체의 위치를 절대값으로 visibility 속성을 hidden으로 해서 보이지 않게 한 다음 body에 추가한다.
var zoom = true
zoom 변수는 이미지를 클릭할 때 첫 번째 클릭은 그림을 확대하고 두 번째 클릭은 확대 그림을 감추는 역할을 하는 변수로 처음에 마우스로 그림을 클릭했을 때 그림을 볼 수 있도록 하기 위해 true로 설정한다.
var magnify = 3
변수 magnify는 그림을 몇 배로 확대할 것인가를 지정하는 것으로 그림의 크기는 이 값을 변경으로 확대배율을 조정할 수 있다.
function display(e){
이 함수는 e 변수를 통해 이벤트를 변수로 받는다. 이것은 netscape에서만 이용된다.
oObject = ((navigator.vendor)? e.target : event.srcElement);
netscape6.x 인 경우에는 target 속성을 통해 explorer인 경우에는 srcElement 속성을 통해 이벤트가 발생한 개체를 변수 oObject에 대입한다.
if(oObject.tagName=="IMG"){
click 이벤트가 발생한 개체가 IMG 즉 그림인 경우에 이 조건식에 속한 명령문이 실행된다.
if(zoom){
zoom 변수의 초기값은 true이기 때문에 그림을 확대하는 아래의 명령문이 실행된다. 다음에 IMG 개체에서 click 이벤트가 발생할 때에는 zoom 속성이 false이기 때문에 else 에 속한 명령문이 실행되어 확대된 그림이 보이지 않게 된다.
with(zoomimg.style){
left = oObject.offsetLeft
top = oObject.offsetTop
width = (oObject.width) * magnify
height = (oObject.width) * magnify
visibility = "visible"
}
zoomimg 개체의 offsetLeft, offsetTop 속성을 통해 그림의 위치를 지정해 준 다음 width , height 속성을 통해 그림의 확대 크기를 지정한 다음 visibility 속성을 통해 추가한 img 개체를 보이게 한다.
zoomimg.src = oObject.src
이제 확대 그림을 보여줄 준비는 다 했는데 아직 그림의 주소가 정해 지지 않았음으로 이벤트가 발생한 IMG 개체의 주소를 zoomimg 개체의 주소로 지정해 줌으로써 확대된 그림이 보이게 된다.
zoom = false
이제 다음 번에 그림을 클릭할 때 확대된 그림을 보이지 않게 하기 위해 zoom 속성을 false로 변경한다.
}else{
zoomimg.style.visibility = "hidden";
그림이 확대된 경우에 확대된 그림이 보이지 않게 하는 역할을 한다.
zoom = true
다음에 IMG 개체를 클릭할 때 그림이 확대되도록 zoom 속성을 true로 설정한다.
}
}
}
document.body.onclick=display
document의 body에서 click 이벤트가 발생하면 이 이벤트를 처리하기 위해 display 함수를 호출한다.
<p><input type="button" name="dblbutton" value="xpert로 이동하기 위해서는 버튼을 더블 클릭 하세요" onDblClick="window.location='http://www.xpert.co.kr';"></p>
이 버튼을 더블 클릭하면 xpert를 읽어 들이고 더블클릭이 아닌 클릭만 하면 아무런 일도 발생하지 않는다.
<p><input type="button" name="blurbtn" value="버튼1" onblur="document.getElementById('blfo').innerHTML='버튼1에서 blur이벤트가 발생했습니다.';">
이 버튼을 클릭하면 이 버튼으로 초점이 이동하게 된다. 그런 다음 다른 개체를 클릭하거나 탭 키를 누르면 다음 버튼으로 초점이 이동하게 되고 이 버튼이 초점을 읽게 됨으로 blur 이벤트가 발생하게 되어 onblur 이벤트 핸들러에 의해 "버튼1에서 blur이벤트가 발생했습니다."라는 메시지를 보여준다.
<input type="button" name="focusbtn" value="버튼3" onFocus="document.getElementById('blfo').innerHTML='버튼3에서 focus이벤트가 발생했습니다.';">
2번 버튼을 클릭한 다음 탭 키를 누르거나 이 버튼을 클릭하면 초점이 이 버튼으로 이동하게 되고 focus 이벤트가 발행하게 되어 "버튼3에서 focus이벤트가 발생했습니다."라는 메시지를 보여준다.
'Language > JAVASCRIPT' 카테고리의 다른 글
| onSelect | onkeypress (0) | 2010.05.10 |
|---|---|
| 이벤트 핸들러와 이벤트 (0) | 2010.05.10 |
| onMouseDown | onMouseUp | onMOuseOver | onMouseOut (0) | 2010.05.10 |
| onMouseMove (0) | 2010.05.10 |
| onAbort | onReset | onSubmit (0) | 2010.05.10 |