This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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
참고 :이 이벤트가 처리될때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> <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 |
브라우저 호환성
같이 보기
- The
HTMLElement.blur()method - Related events:
focus,focusin,focusout - This event on
Windowtargets:blurevent - Focusing: focus/blur