Window: focus event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

focus 이벤트는 포커스가 된 요소에 발생합니다.

focus 이벤트의 반대 이벤트는 blur 입니다.

이 이벤트는 취소할 수 없고, 전파되지도 않습니다.

구문

addEventListener() 와 같은 메서드의 이벤트 이름을 사용하거나 이벤트 핸들러 속성을 설정합니다.

js
addEventListener("focus", (event) => {});

onfocus = (event) => {};

이벤트 타입

FocusEvent 입니다. UIEventEvent 를 상속 받습니다.

Event UIEvent FocusEvent

이벤트 속성

이 인터페이스는 부모인 UIEvent 를 상속받으며 간접적으로 Event 또한 상속 받습니다.

FocusEvent.relatedTarget

EventTarget는 이 이벤트의 보조 대상을 나타냅니다. (페이지 내부나 외부에서 클릭하는 것과 같은) 일부 경우에는, 이 속성이 보안상의 이유로 null 로 설정됩니다.

예제

라이브 예제

이 예제는 문서에 포커스가 유실되었을 때의 모양이 어떻게 바뀌는지를 보여줍니다. focusblur 를 확인하기 위해 addEventListener() 가 사용되었습니다.

HTML

html
<p id="log">문서를 클릭하여 포커스해 보세요.</p>

CSS

css
.paused {
  background: #ddd;
  color: #555;
}

JavaScript

js
function pause() {
  document.body.classList.add("paused");
  log.textContent = "포커스 유실!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "이 문서는 포커스되었습니다. 문서의 바깥을 클릭하여 포커스를 유실시켜 보세요.";
}

const log = document.getElementById("log");

window.addEventListener("blur", pause);
window.addEventListener("focus", play);

결과

명세서

Specification
UI Events
# event-type-focus
HTML
# handler-onfocus

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
focus event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

같이 보기

  • 연관 이벤트: blur
  • Element 을 대상으로 하는 이벤트: focus 이벤트