inxight

이벤트 핸들링

onAbort	이미지를 로딩하는 작업이 사용자의 행동으로 인해 취소되었을때
onBlur	문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라질때
onChange	텍스트 필드나 텍스트 영역, 파일 업로드 필드, 선택 항목이 변경되어 현재 입력 포커스가 사라질 때
onClick	링크나 클라이언트측 이미지맵 영역, 폼 요소가 클릭되었을 때
onDbClick	링크나 클라이언트측 이미지맵 영역, 문서가 더블 클릭되었을 때
onDragDrop	드래그된 객체가 윈도우나 프레임에 드롭되었을 때
onError	이미지나 윈도우, 프레임을 로딩하는 동안 에러가 발생할 때
onFocus	문서나 윈도우, 프레임 세트, 폼 요소에 입력 포커스 놓였을 때
onKeyDown	키를 누를 때
onKeyPress	키를 눌렀다 놓았을 때
onKeyUp	키를 놓았을 때
onLoad	이미지나 문서, 프레임이 로드될 때
onMouseDown	마우스 버튼 누를 때
onMouseMove	마우스를 이동할 때
onMouseOut	링크나 클라이언트측 이미지맵에서 마우스를 옮길 때
onMouseOver	마우스를 링크나 클라이언트측 이미지맵으로 옮길 때
onMouseUp	마우스 버튼을 놓았을 때
onMove	사용자가 윈도우나 프레임에서 이동할 때
onReset	폼의 리셋 버튼을 클릭하여 폼을 리셋시킬 때
onResize	사용자가 윈도우나 프레임의 크기를 조절할 때
onSelect	텍스트는 텍스트 필드나 영역에서 선택되었을 때
onSubmit	폼이 제출될 때 (서브밋 버튼 눌렀을 때)
onUnload	사용자가 문서나 프레임 세트를 종료할 때

window.onload와 window::onload()

페이지 로딩시 시작할 스크립트 선언에 대해 <body onload="">의 onload를 많이 사용해 보았을 것입니다.

그리고 모든 페이지에서 공통으로 들어갈 스크립트는 페이지 마다 작성을 하지 않고, js 파일을 만들어 연결을 하여 사용을 할 것입니다.

여기서 그럼 모든 페이지에서 load시 공통으로 실행될 스크립트는 어떻게 작업을 할까요??

window.onload를 사용 하면 됩니다.

window.onload = function(){ 시작시 실행될 내용 }

이런식으로 말이죠.

그런데 문제는 window.onload와 <body onload="">는 동시에 사용을 할 수 없습니다.

<body onload="">가 실행이 되면 window.onload는 실행이 되지 않는 문제가 있습니다.

그래서 이를 해결하고자 할때 사용하는 것이

window::onload()입니다.

function window::onload(){ 시작시 실행될 내용 }

이렇게 사용을 하면 됩니다.

실행 순서는 <body onload="">가 먼저 실행되고, 이어서 window::onload()가 실행됩니다

모서리가 둥근 박스 (CSS)

.rtop, .rbottom{display:block; background: #FFFFFF;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; }

.r { text-align: center; width:80px; font: bold 12px; color: #000000 }
.r1 { margin: 0 5px; background: #DEDEDE; height: 1px; }
.r2 { margin: 0 3px; border: solid #DEDEDE; border-width: 0 2px; }
.r3 { margin: 0 2px; border: solid #DEDEDE; border-width: 0 1px; }
.r4 { margin: 0 1px; border: solid #DEDEDE; border-width: 0 1px; height: 2px}
.rc { border: solid #DEDEDE; border-width: 0 1px; }

<div class="rc">
<a href='<? echo "$g_dir/index.php" ?>' target="_blank">상점가기</a>
</div>

팝업관련 스크립트 (팝업창 닫고, 부모 페이지로 이동)

function MovePage() {
opener.location.href="member.php"
window.close()
}

팝업창 닫고 부모창을 리로드

팝업로그인 할때 팝업창을 닫고 부모창으로 리로드를 시켜줌

자바스크립트 php 연동 풍선도움말

<style>
div.none { padding:15px 15px 15px 15px; width:200px; position:absolute; border-width:3; border-color:#cccccc; border-style:solid;font-size:9pt; background-color:#FFFFFF }
</style>
<script>
<!--
var preview="";
var gobj="";
function attachEvent_(obj, evt, fuc, useCapture) {
   if(!useCapture) useCapture=false;
   if(obj.addEventListener) { // W3C DOM 지원 브라우저
return obj.addEventListener(evt,fuc,useCapture);
   } else if(obj.attachEvent) { // MSDOM 지원 브라우저
return obj.attachEvent("on"+evt, fuc);
   } else { // NN4 나 IE5mac 등 비 호환 브라우저
MyAttachEvent(obj, evt, fuc);
obj['on'+evt]=function() { MyFireEvent(obj,evt) };
   }
}

function MyAttachEvent(obj, evt, fuc) {
   if(!obj.myEvents) obj.myEvents= {};
   if(!obj.myEvents[evt]) obj.myEvents[evt]=[];
   var evts = obj.myEvents[evt];
   evts[evts.length]=fuc;
}

function MyFireEvent(obj, evt) {
   if(!obj.myEvents || !obj.myEvents[evt]) return;
   var evts = obj.myEvents[evt];
   for (var i=0;i<len;i++) {
len=evts.length;
evts[i]();
   }
}

function previewShow(e, obj, pv) {
   preview=pv;
   gobj=obj;
   attachEvent_(obj, "mousemove", previewMove, false);
   attachEvent_(obj, "mouseout", previewHide, false);
}

function previewMove(e) {
   var hb = document.getElementById(preview);
   if(hb.parentElement) hb.parentElement.style.display="";
   else hb.parentNode.style.display="";
   var evt = e ? e : window.event;
   var posx=0;
   var posy=0;

   if (evt.pageX || evt.pageY) { // pageX/Y 표준 검사
posx = evt.pageX +8;
posy = evt.pageY +16;
   } else if (evt.clientX || evt.clientY) { //clientX/Y 표준 검사 Opera
posx = evt.clientX +10;
posy = evt.clientY +20;
if (window.event) { // IE 여부 검사
posx += document.body.scrollLeft;
posy += document.body.scrollTop;
   }
   }

hb.style.left = posx + "px";
hb.style.top = posy + "px";
}

function previewHide() {
   var hb = document.getElementById(preview);
   if(hb.parentElement) hb.parentElement.style.display="none";
   else hb.parentNode.style.display="none";

detachEvent_(gobj,"mousemove", previewMove, false);
}
-->
</script>

아래는 php부분에 입력

$i의 갯수만큼 출력되게 생성한다.

echo "<td><a href='#' onmouseover=previewShow(event,this,'tt_kin_$i');><img src='img/icon3.gif' border=0></a><span style=display:none><div id=tt_kin_$i class=none>".$info2."</div></span></td>";

이미지가 지정크기보다 클 때만 자동 리사이즈

<img src="1.gif" width="187" height="32" alt="" border="0" onload="if(this.width>150){this.width=150}">

2009년 7월 29일 수요일