blur

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

General info

Specification
DOM L3
Interface
FocusEvent (en-US)
Bubbles
No
Cancelable
No
Target
Element
Default Action
None.

주의:

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

Properties

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

이벤트 위임

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

HTML Content

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

JavaScript Content

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

Browser compatibility

BCD tables only load in the browser