최신 웹 개발 튜토리얼
 

onfocus 및 이벤트

<이벤트 객체

예

입력 필드가 포커스를 취득 할 때 자바 스크립트를 실행합니다 :

<input type="text" onfocus="myFunction()">
»그것을 자신을 시도

더 "Try it Yourself" 아래의 예.

정의 및 사용

요소가 포커스를 얻었을 때 onfocus 및 이벤트가 발생합니다.

onfocus 및 이벤트가 자주 <input>, <선택>과 함께 사용 <a> .

Tip: onfocus 및 이벤트의 반대 에 onblur 이벤트입니다.

팁 : onfocus 및 이벤트가 유사하다 onfocusin 이벤트입니다. 주요 차이점은 onfocus 및 이벤트가 버블을하지 않는다는 것입니다. 당신이 요소 또는 자식이 포커스를받을 수 있는지 여부를 찾으려는 경우 따라서, 당신은 onfocusin 이벤트를 사용할 수 있습니다. 그러나의 선택 useCapture를 매개 변수를 사용하여이를 달성 할 수있다 addEventListener() onfocus 및 이벤트에 대한 방법을.

브라우저 지원

행사
onfocus 예 예 예 예 예

통사론

HTML에서 :

< »그것을 자신을 시도

자바 스크립트에서 :

object .onfocus=function(){ »그것을 자신을 시도

자바 스크립트는 사용 addEventListener() 메서드를 :

object .addEventListener("focus", myScript );
»그것을 자신을 시도

참고 : addEventListener() 메서드는 인터넷 익스플로러 8 이전 버전에서는 지원되지 않습니다.

기술적 세부 사항

거품 : 아니
취소 가능 : 아니
이벤트 유형: 의 FocusEvent
지원되는 HTML 태그 : <기본>, <BDO>로 <br>, <머리>, <HTML>, <iframe을>, <메타>, <PARAM>, <스크립트>, <스타일>, 그리고 : 제외한 모든 HTML 요소, <title>
DOM 버전 : 레벨 2 이벤트
예

더 예

예

사용 "onfocus" 와 함께를 "onblur" 이벤트 :

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
»그것을 자신을 시도

예

이벤트 위임 :의 useCapture를 매개 변수를 설정 addEventListener() true로를 :

<form id="myForm">
  <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true );
x.addEventListener("blur", myBlurFunction, true );

function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";
}
</script>
»그것을 자신을 시도

예

이벤트 위임 : (파이어 폭스에서 지원되지 않음) focusIn 이벤트를 사용하여 :

<form id="myForm">
  <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);

function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";
}
</script>
»그것을 자신을 시도
<이벤트 객체