在此页

• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

focusout event fires when an element is about to lose focus. The main difference between this event and blur is that focusout bubbles while blur 不会。

The opposite of focusout is focusin .

冒泡	Yes
可取消	No
接口	FocusEvent
事件处理程序特性	onfocusout
Sync / Async	Sync
Composed	Yes

范例

实时范例

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>
					

JavaScript

const form = document.getElementById('form');
form.addEventListener('focusin', (event) => {
  event.target.style.background = 'pink';
});
form.addEventListener('focusout', (event) => {
  event.target.style.background = '';
});
					

结果

规范

规范	状态	注释
UI Events	工作草案	Added info that this event is composed.
DOM (文档对象模型) 3 级事件规范	过时	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
focusout event	Chrome 1	Edge 12	Firefox 52	IE 9	Opera 11.6	Safari 5	WebView Android 1	Chrome Android 18	Firefox Android 52	Opera Android 12.1	Safari iOS 4.2	Samsung Internet Android 1.0

图例

完整支持

完整支持

另请参阅

• 相关事件： blur , focus , focusin

元数据

• 最后修改： May 1, 2020

相关话题

1. 元素
2. 特性

   1. accessKey
   2. 属性
   3. childElementCount
   4. children
   5. classList
   6. className
   7. clientHeight
   8. clientLeft
   9. clientTop
   10. clientWidth
   11. currentStyle
   12. firstElementChild
   13. id
   14. innerHTML
   15. lastElementChild
   16. localName
   17. 名称
   18. namespaceURI
   19. nextElementSibling
   20. onfullscreenchange
   21. onfullscreenerror
   22. openOrClosedShadowRoot
   23. outerHTML
   24. part
   25. prefix
   26. previousElementSibling
   27. runtimeStyle
   28. scrollHeight
   29. scrollLeft
   30. scrollLeftMax
   31. scrollTop
   32. scrollTopMax
   33. scrollWidth
   34. shadowRoot
   35. slot
   36. tabStop
   37. tagName
3. 方法

   1. after()
   2. animate()
   3. append()
   4. attachShadow()
   5. before()
   6. closest()
   7. computedStyleMap()
   8. createShadowRoot()
   9. getAnimations()
   10. getAttribute()
   11. getAttributeNames()
   12. getAttributeNode()
   13. getAttributeNodeNS()
   14. getAttributeNS()
   15. getBoundingClientRect()
   16. getClientRects()
   17. getElementsByClassName()
   18. getElementsByTagName()
   19. getElementsByTagNameNS()
   20. hasAttribute()
   21. hasAttributeNS()
   22. hasAttributes()
   23. hasPointerCapture()
   24. insertAdjacentElement()
   25. insertAdjacentHTML()
   26. insertAdjacentText()
   27. matches()
   28. msZoomTo()
   29. prepend()
   30. querySelector()
   31. querySelector()
   32. querySelectorAll()
   33. querySelectorAll()
   34. releasePointerCapture()
   35. remove()
   36. removeAttribute()
   37. removeAttributeNode()
   38. removeAttributeNS()
   39. replaceChildren()
   40. replaceWith()
   41. requestFullscreen()
   42. requestPointerLock()
   43. scroll()
   44. scrollBy()
   45. scrollIntoView()
   46. scrollIntoViewIfNeeded()
   47. scrollTo()
   48. setAttribute()
   49. setAttributeNode()
   50. setAttributeNodeNS()
   51. setAttributeNS()
   52. setCapture()
   53. setPointerCapture()
   54. toggleAttribute()
4. 事件

   1. afterscriptexecute
   2. auxclick
   3. blur
   4. click
   5. compositionend
   6. compositionstart
   7. compositionupdate
   8. contextmenu
   9. copy
   10. cut
   11. dblclick
   12. DOMActivate
   13. DOMMouseScroll
   14. error
   15. focus
   16. focusin
   17. focusout
   18. fullscreenchange
   19. fullscreenerror
   20. gesturechange
   21. gestureend
   22. gesturestart
   23. keydown
   24. keypress
   25. keyup
   26. mousedown
   27. mouseenter
   28. mouseleave
   29. mousemove
   30. mouseout
   31. mouseover
   32. mouseup
   33. mousewheel
   34. MozMousePixelScroll
   35. msContentZoom
   36. MSGestureChange
   37. MSGestureEnd
   38. MSGestureHold
   39. MSGestureStart
   40. MSGestureTap
   41. MSInertiaStart
   42. MSManipulationStateChanged
   43. overflow
   44. paste
   45. scroll
   46. select
   47. show
   48. touchcancel
   49. touchend
   50. touchmove
   51. touchstart
   52. underflow
   53. webkitmouseforcechanged
   54. webkitmouseforcedown
   55. webkitmouseforceup
   56. webkitmouseforcewillbegin
   57. wheel
5. 继承：

   1. 节点
   2. EventTarget