blur
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
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 # handler-onblur |
브라우저 호환성
Loading…
같이 보기
- The
HTMLElement.blur()method - Related events:
focus,focusin,focusout - This event on
Windowtargets:blurevent - Focusing: focus/blur