개체에 초점(포커스)이 주어 졌을 때 발생한다.


이벤트 속성
object.onfocus=handler JScript 만-
object.onfocus=GetRef('handler') VBScript 5.0-
인라인 HTML <ELEMENT onfocus ="handler"> 모든 플랫트폼
명명된 스크립트 <SCRIPT for= object event=onfocus> Explorer-
용법
이벤트가 발생되면 'JavascriptCode'를 실행한다.
Javascript 에서는
objName.onfocus='JavascriptCode'
HTML 에서는
<ELEMENT onFocus="JavascriptCode">
이벤트 특성
Bubbles 없음
취소 불가
발생 원인
  • 개체를 클릭하였을 때.
  • 키보드에 의한 항해로 해당 개체의 순서가 되었을 때.
  • focus 메서드를 사용했을 때.
  • setActive 메서드를 사용했을 때.
디폴트 작용 개체에 초점을 준다.
HTML 규격 HTML 4.0 규격

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

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

마우스에 의한 항해탭(tab)에 의한 항해에 의하여, 개체에 초점(포커스)이 주어 졌을 때 발생한다.

Javascript 상에서 focus 메서드로 개체에 초점을 줄 수도 있다.

document.onload=objName.focus();

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

주의 : setActive 메서드를 사용하는 것은 문서 초점에 영향을 주지 않는다.
focus 메서드를 사용하면 개별 엘레멘트가 초점을 받고 활성 엘레멘트가 된다.

한 개체 활성을 잃고 다른 개체가 activeElement가 될 때, 활성은 잃는 개체에 onblur 이벤트가 발생된 다음에만 activeElement가 되는 개체에 onfocus 이벤트가 발생된다. 사용자의 입력을 받기 위한 준비로 초점을 그 개체에 준다.

엘레맨트들은 그 문서가 로딩이 완료될 때까지 초점을 받을 수 없다.

IE5에서 사용자가 페이지로 되돌아 왔을 때, 엘레멘트는 현재의 브라우저 방문기록(history) 속의 초점 정보을 그대로 유지한다. 문서를 로딩 했을 때 엘레멘트에 onfocus 이벤트가 의도하지 않게 발생되는 것을 방지하기 위하여, 다른 엘레멘트에 focus 메서드를 적용시킨다.

IE5에서 탭에 의한 항해 순서에 사용되는 tabIndex 애트리뷰트를 문서에 추가하며 명시적으로 초점을 받는 것이 지정되지 않은 엘레멘트에 초점을 받게 할 수 있다.

IE5.5에서는 documentdocument활성 엘레멘트에 초점주는 것을 별도로 관리할 수 있다. onactivateondeactivate의 동기적 이벤트들은 효과적으로 활성 변화 관리를 제공한다.

적용
개체scriptHTMLIE


onfocus 이벤트 예제


결과 표시창

INPUT type=text 개체가 onfocus 이벤트를 받으면 그 개체와 개체에 연관된 라벨(label) 개체의 클라스가 변경되어 적용된다.

<STYLE>
.focusClass{background-color:#088;color:#ffd;font-size:14;font-weight:bold;padding:5;}
.stdClass{ background-color:#ffd;color:#080;font-size:14;font-weight:bold;padding:5;}
</STYLE>
<SCRIPT>
function DoIt(){
  obj=event.srcElement;
  obj.className='focusClass';
  inObj=eval(obj.id + '_label');
  inObj.className='focusClass';
  if (obj.id=='obj1') obj2.className=obj2_label.className='stdClass';
  else obj1.className=obj1_label.className='stdClass';
  str='&lt;'+inObj.nodeName+' id='+inObj.id+' class='+inObj.className+'&gt;<BR>';
  str+='&lt;'+obj.nodeName+' type='+obj.type+' id='+obj.id+' class='+obj.className+'&gt; '+event.type+' 이벤트 발생';
  showArea.innerHTML=str;
}
</SCRIPT>
<LABEL for="objLabel" class="stdClass" id="obj1_label">텍스트를 입력해 보라</LABEL>
<INPUT type="text" class="stdClass" id="obj1" onfocus="DoIt()"><BR>
<LABEL for="objLabel" class="stdClass" id="obj2_label">텍스트를 입력해 보라</LABEL>
<INPUT type="text" class="stdClass" id="obj2" onfocus="DoIt()">
<DIV id=showArea style="border:solid 1 blue;padding:5;margin:5">결과 표시창</DIV>