blur

blur 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 focusout 이벤트의 가장 다른점은 focusout 은 이벤트 버블링이 발생합니다.

General info

Specification

DOM L3

Interface
FocusEvent
Bubbles

No

Cancelable

No

Target

Element

Default Action

None.

참고: 이 이벤트가 처리될때 Document.activeElement의 값이 브라우저마다 다릅니다 (Firefox bug 452307): IE10은 이 값을 포커스가 옮겨가는 엘리먼트에 추가하지만, Firefox와 크롬은 도큐먼트의 body 에 추가합니다.

Properties

Property Type Description
target 읽기 전용 EventTarget Event target (DOM element)
type 읽기 전용 DOMString The type of event.
bubbles 읽기 전용 Boolean Whether the event normally bubbles or not.
cancelable 읽기 전용 Boolean Whether the event is cancellable or not.
relatedTarget 읽기 전용 EventTarget (DOM element) null

이벤트 위임

이 이벤트에 이벤트 위임을 적용하는 방법은 두가지가 있습니다 : 브라우저가 지원한다면 focusout 이벤트를 사용하거나, addEventListener의 "useCapture" 파라미터를 true로 설정하세요:

HTML Content

html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>

JavaScript Content

js
var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);

결과

명세서

Specification
UI Events
# event-type-blur
HTML Standard
# handler-onblur

브라우저 호환성

BCD tables only load in the browser

같이 보기