추천 과정:

DOM 이벤트 FocusEvent

onfocusin 이벤트:

정의와 사용법:

Firefox는 onfocusin 이벤트를 지원하지 않지만, addEventListener() 메서드의 선택적 useCapture 매개변수를 사용하여 onfocus 이벤트의 캡처 리스너를 통해 요소의 자식 요소가 포커스를 얻었는지 확인할 수 있습니다.onfocusin 이벤트는 요소가 포커스를 얻을 준비 중일 때 발생합니다。 onfocus 이벤트onfocusin 이벤트는:

Firefox는 onfocusin 이벤트를 지원하지 않지만, addEventListener() 메서드의 선택적 useCapture 매개변수를 사용하여 onfocus 이벤트의 캡처 리스너를 통해 요소의 자식 요소가 포커스를 얻었는지 확인할 수 있습니다.。주요 차이점은 onfocus 이벤트가 버블링하지 않음입니다. 따라서 요소나 자식 요소가 포커스를 얻었는지 확인하려면 onfocusin 이벤트를 사용해야 합니다.

Firefox는 onfocusin 이벤트를 지원하지 않지만, addEventListener() 메서드의 선택적 useCapture 매개변수를 사용하여 onfocus 이벤트의 캡처 리스너를 통해 요소의 자식 요소가 포커스를 얻었는지 확인할 수 있습니다.ヒント: onfocusout 이벤트onfocusin 이벤트는:

반대로.

예제

예제 1

입력 필드가 포커스를 얻을 준비 중일 때 JavaScript를 실행합니다:

직접 테스트해 보세요

<input type="text" onfocusin="myFunction()">

페이지 하단에 더 많은 TIY 예제가 있습니다.

문법:

HTML에서:< element.addEventListener("focusin",onfocusin="

직접 테스트해 보세요

">

JavaScript에서 addEventListener() 메서드를 사용하여:JavaScript에서 (Chrome, Safari 및 Opera 15+에서는 일부 경우에서 정상적으로 작동하지 않을 수 있습니다):.addEventListener("focusin",.onfocusin = function(){

직접 테스트해 보세요

};

JavaScript에서 addEventListener() 메서드를 사용하여:object .addEventListener("focusin",myScript

직접 테스트해 보세요

주의사항:); Internet Explorer 8 이상 버전에서 지원되지 않습니다addEventListener() 메서드:

。

기술 세부 사항: 지원:
버블링: 취소 가능:
지원되지 않음: FocusEvent
지원되는 HTML 태그: 모든 HTML 요소는 다음 요소를 제외하고 있습니다：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 및 <title>
DOM 버전: Level 2 Events

브라우저 지원

표에서 수치는 이 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

이벤트 Chrome IE Firefox Safari Opera
onfocusin 지원: 지원: 52.0 지원: 지원:

주의사항:onfocusin 이벤트는 Chrome, Safari, Opera 15+에서 JavaScript HTML DOM 문법에서 예상대로 작동하지 않을 수 있습니다. 그러나, HTML 속성으로 사용되어 addEventListener() 메서드를 사용해야 합니다(아래의 문법 예제를 참조하세요).

更多实例

예제 2

"onfocusin" 및 "onfocusout" 이벤트와 함께 사용

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

직접 테스트해 보세요

예제 3

이벤트 위임: addEventListener()의 useCapture 파라미터를 true로 설정( focus 및 blur 사용)

<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>

직접 테스트해 보세요

예제 4

이벤트 위임: 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>

직접 테스트해 보세요

DOM 이벤트 FocusEvent