blur
General info
- Specification
- Interface
FocusEvent
(en-US)- Bubbles
-
No
- Cancelable
-
No
- Target
-
Element
- Default Action
-
None.
Note: 이 이벤트가 처리될때
Document.activeElement
의 값이 브라우저마다 다릅니다 (Firefox bug 452307): IE10은 이 값을 포커스가 옮겨가는 엘리먼트에 추가하지만, 파이어폭스와 크롬은 도큐먼트의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
<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);
결과
명세서
Specification |
---|
UI Events # event-type-blur |
HTML Standard # handler-onblur |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- The
HTMLElement.blur()
(en-US) method - Related events:
focus
(en-US),focusin
(en-US),focusout
(en-US) - This event on
Window
targets:blur
(en-US) event - Focusing: focus/blur