온포커스 이벤트
예시
입력 필드에 포커스가 있을 때 JavaScript를 실행합니다.
<input type="text"
onfocus="myFunction()">
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
onfocus 이벤트는 요소가 포커스를 받을 때 발생합니다.
onfocus 이벤트는 <input>, <select> 및 <a>와 함께 가장 자주 사용됩니다.
팁: onfocus 이벤트는 onblur 이벤트의 반대입니다.
팁: onfocus 이벤트는 onfocusin 이벤트와 유사합니다. 주요 차이점은 onfocus 이벤트가 버블링되지 않는다는 것입니다. 따라서 요소 또는 해당 자식이 포커스를 받는지 확인하려면 onfocusin 이벤트를 사용할 수 있습니다. 그러나 onfocus 이벤트에 대해 addEventListener() 메서드의 선택적 useCapture 매개변수를 사용하여 이를 달성할 수 있습니다 .
브라우저 지원
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
통사론
HTML:
<element onfocus="myScript">
자바스크립트:
object.onfocus = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("focus", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
거품: | 아니 |
---|---|
취소 가능: | 아니 |
이벤트 유형: | 포커스 이벤트 |
지원되는 HTML 태그: | <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 및 <title>을 제외한 모든 HTML 요소 |
DOM 버전: | 레벨 2 이벤트 |
더 많은 예
예시
"onfocus"를 "onblur" 이벤트와 함께 사용:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
예시
초점에 대한 입력 필드 지우기:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
예시
이벤트 위임: addEventListener() 의 useCapture 매개변수를 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 이벤트 사용(Firefox에서는 지원하지 않음):
<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>