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

General info

Specification
DOM L3
Interface
FocusEvent
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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 (Yes) (Yes)[1] 6 12.1 5.1
  
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 53 (Yes) ? 10.0 12.1 5.1

[1] Prior to Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) the interface for this event was Event, not FocusEvent. See (bug 855741).

문서 태그 및 공헌자

이 페이지의 공헌자: ExE-Boss, whdckszxxx
최종 변경자: ExE-Boss,