blur
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ko/web/api/element/index.md)
blur
이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 focusout
이벤트의 가장 다른점은 focusout
은 이벤트 버블링이 발생합니다.
General info
- Specification
- 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
같이 보기
- The
HTMLElement.blur()
method - Related events:
focus
,focusin
,focusout
- This event on
Window
targets:blur
event - Focusing: focus/blur