개체에 초점을 생실했을 때 발생한다.


이벤트 속성
object.onblur=handler JScript 만-
object.onblur=GetRef('handler') VBScript 5.0-
인라인 HTML <ELEMENT onblur ="handler"> 모든 플랫트폼
명명된 스크립트 <SCRIPT for= object event=onblur> Explorer-
용법
초점을 생실했을 때 'JavascriptCode'를 실행한다.
Javascript 에서는
object.onblur='JavascriptCode'
HTML 에서는
<ELEMENT onBlur="JavascriptCode">
이벤트 특성
Bubbles 없음
취소 불가
발생 원인

마우스에 의한 항해탭(tab)에 의한 항해에 의하여, 개체가 초점(포커스)을 상실했을 때 발생한다.

  • 문서의 배경이나 다른 개체를 마우스로 클릭하였을 때.
  • 키보드로 한 개체에서 다음 개체로 항해하였을 때.
  • 초점을 받은 개체에서 blur 메서드를 실행했을 때.
  • 초점을 다른 적용으로 바꾸거나 다른 윈도우를 여는 경우.
디폴트 작용 이벤트가 발생된 개체에서 초점을 제거하고 다른 곳으로 이동시킨다.
HTML 규격 HTML 4.0 규격.

DHTML 개체 모델에서 이벤트처리자는 파라메터들을 직접 받지는 못해도, event개체의 쿼리를 사용할 수 있다.

altKey ALT 키가 눌렸는가를 반환하거나 설정한다.
altLeft 왼쪽 ALT 키가 눌렸는가를 반환하거나 설정한다.
clientX 윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수평 좌표를 반환하거나 설정한다.
clientY 윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수직 좌표를 반환하거나 설정한다.
ctrlLeft 왼쪽 CTRL 키가 눌렸는가를 반환하거나 설정한다.
offsetX 이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수평 좌표를 반환하거나 설정한다.
offsetY 이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수직 좌표를 반환하거나 설정한다.
screenX 사용자 스크린에 상대적인 마우스포인터의 수평 위치를 반환하거나 설정한다.
screenY 사용자 스크린에 상대적인 마우스포인터의 수직 위치를 반환하거나 설정한다.
shiftLeft 왼쪽 SHIFT 키가 눌렸는가를 반환하거나 설정한다.
srcElement 이벤트를 발생시킨 개체를 반환하거나 설정한다.
type 이벤트 개체의 이벤트 명칭을 반환하거나 설정한다.
x 상대적으로 위치한 모체 개체에 상대적인 위치 수평 좌표를 반환하거나 설정한다.
y 상대적으로 위치한 모체 개체에 상대적인 위치 수직 좌표를 반환하거나 설정한다.

특기

Javascript 상에서 blur 메서드로 개체에 초점을 제거할 수도 있다.

document.onload=objName.blur();

onfocus 이벤트처리자와 반대이다. onfocus는 한개의 개체에 만 줄 수 있고, 나머지 개체는 모두 onblur 이벤트가 발생한 상태이다.

onblur 이벤트는초점을 받는 개체에서 onfocusonclick 이벤트가 발생되기 전에 원래 개체에 발생된다. onchange 이벤트가 적용될 수 있는 곳에서는 onchange 이벤트 발생 후에 onblur 이벤트가 발생된다.

언제 사용자로부터 입력을 받거나 입력의 유효성을 확인할 것인가를 결정할 때 onfocus 이벤트 사용한다.

IE5에서는, onblur 이벤트를 발생시키는 엘레멘트의tabIndex 애트리뷰트를 설정하여야 한다. 이후의 버전에서는 onblur 이벤트는 비동기적이다.

적용
개체scriptHTMLIE


onfocus, onblur 이벤트 예제

각 입력칸으로 초점을 이동시켜 보라.

<SCRIPT>
function showit(obj){
  for(i=0;i<FNAME.length;i++){
    if (fname[i]==obj) statstr=event.type;
    else statstr='blur';
    if (i==0) swName.innerHTML=statstr;
    if (i==1) swMail.innerHTML=statstr;
    if (i==2) swPhone.innerHTML=statstr;
  }
  str='event.srcElement.name='+event.srcElement.name+'<BR>';
  str+='event.srcElement.value='+event.srcElement.value+'<BR>';
  str+=obj.value+' '+event.type;
  showArea.innerHTML=str;
}
</SCRIPT>
<FORM name=fname>
<TABLE border=1>
<TR>
<TD><INPUT type=text name=strName value="이름" onblur="showit(this)" onfocus="showit(this)"></TD>
<TD><INPUT type=text name=strMail value="이메일" onblur="showit(this)" onfocus="showit(this)"></TD>
<TD><INPUT type=text name=strPhone value="전화번호" onblur="showit(this)" onfocus="showit(this)"></TD>
</TR>
<TR>
<TD id=swName></TD>
<TD id=swMail></TD>
<TD id=swPhone></TD>
</TR>
</TABLE>
</FORM>
<DIV id=showArea></DIV>